Antes con CSS2 si queríamos crear un recuadro con los bordes redondeados, primero teníamos que hacer las cuatro imágenes de las esquinas redondeadas y poner cada imagen en una esquina y bla, bla, bla….
Ahora con CSS3, y la propiedad border-radius lo podemos hacer de manera muy fácil. Fijaos en el siguiente ejemplo:
Bordes redondeados con CSS3
Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.
Para conseguir este efecto he usado el código XHTML y CSS que os muestro a continuación.
Código XHTML
<div class="bordes-redondeados">
<h2>Bordes redondeados con CSS3</h2>
<p>Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.</p>
</div> Código CSS
.bordes-redondeados {
width: 400px;
margin: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #069;
}
.bordes-redondeados h2 {
padding: 10px 15px 5px 15px;
text-align: center
color: #fff;
}
.bordes-redondeados p {
margin: 0;
padding: 5px 15px 10px 15px;
}
Os he enseñado la forma más sencilla de redondear las esquinas de un contenedor div, pero hay un montón de formas de combinar y aplicar esta técnica. Otros ejemplos podrían ser estos:
Ejemplo 1
Ejemplo 2
Ejemplo 3
Para conseguir recuadros con diferentes radios en cada esquina, sólo tenemos que darle 4 valores diferentes a la propiedad border-radius.
.bordes-redondeados {
width: 400px;
margin: 10px;
-webkit-border-radius: 2em 1em 4em 3em;
-moz-border-radius: 2em 1em 4em 3em;
border-radius: 2em 1em 4em 3em;
background-color: #069;
}
Si tenéis cualquier pregunta o consulta, no dudéis en hacerlo en los comentarios, que son gratis 😀
Estas características ahorran muchísimo trabajo, pero me gustaría que el código sea «border-radius» y no «-xxxx-border-radius».
A ver cuando llega…
En IE no va! 🙁
A quien se le ocurre usar IE, ainsss…
Si IE no soporta muchas propiedades de CSS2.1, de CSS3 pues mucho menos.
Usa Firefox compañero, o aún mejor Safari 😉
No es que me guste usar IE, sino que como diseñador web, primero ha de funcionar en IE, y luego en el resto. Es una obligación… no por placer 🙂
Saludos crack! Por cierto la cabeceras de arriba tb se vuelve loca, y se alarga hasta el infinito! jeje
Chao!
No fotis, si yo lo veo bien, mañana lo comprobaré en IE, que ahora no tengo ganas, pero juraría que la ultima vez que lo vi en IE se veía bien.
Merci figura 😉
Ahora estoy con ie6 y lo veo bien, o sea, que no se me alarga hasta el infinito… y más allá!!! 😛
PD: De todas formas ahora que estoy con ie6 voy a arreglar un par de fallos que he visto 😉
Muy interesante , me es de gran ayuda.
Gracias
Es completamente inútil si no funciona en IE. Por mucho que nos duela, es el navegador más usado y hay que trabajar para el.
Este script no sirve.
Kad: no te creas, no te creas, por ejemplo mira el panel de administración de WordPress, si lo usas con FF se ve todo orgánico y redondito, pero si tienes IE se ve todo cuadrado. La funcionalidad es la misma sólo que en FF se ve mas lindo.
Cierto, inkilino, WordPress se puede permitir conservar sus css en espera de IE 8 o superiores y en la suma de css3. Pero lamentablemente, mi cliente usa explorer y quiere los bordes redondos. El paga, el manda.
en cierto lo que dijo el compañero sobre que el IE es el más usado, explico porqué, toas las computadoras que las personas compren nuevas viene el IE por default cierto y como no todos estamos en el mundo de hacer páginas web para no usar la porqueria de Ie, casi todo el mundo usa IE
Hay que tener cuidado con utilizar CSS3 xk los navegadores no cumplen todavía todos los estándares.