Bordes redondeados con CSS3

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

También te puede interesar:

CSS, Diseño, Webdev 12

josepzin
# 1

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…

Con Mozilla Firefox 3.5.2 y Windows XP
El Sábado 29 de Agosto de 2009 a las 9:50
Jordi Oller
# 2

En IE no va!

Con Internet Explorer 7.0 y Windows XP
El Miércoles 2 de Septiembre de 2009 a las 23:58
InKiLiNo
# 3

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

Con Safari 531.9 y Mac OS X
El Jueves 3 de Septiembre de 2009 a las 0:08
Jordi Oller
# 4

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!

Con Internet Explorer 7.0 y Windows XP
El Jueves 3 de Septiembre de 2009 a las 0:12
InKiLiNo
# 5

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

Con Safari 531.9 y Mac OS X
El Jueves 3 de Septiembre de 2009 a las 0:17
InKiLiNo
# 6

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

Con Internet Explorer 6.0 y Windows XP
El Jueves 3 de Septiembre de 2009 a las 7:43
EriK
# 7

Muy interesante , me es de gran ayuda.

Gracias

Con Mozilla Firefox 3.5.2 y Windows XP
El Domingo 6 de Septiembre de 2009 a las 3:44
Kad
# 8

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.

Con Internet Explorer 7.0 y Windows XP
El Domingo 13 de Septiembre de 2009 a las 18:09
josepzin
# 9

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.

Con Mozilla Firefox 3.5.3 y Windows XP
El Domingo 13 de Septiembre de 2009 a las 18:52
Kad
# 10

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.

Con Mozilla Firefox 3.5.3 y Windows XP
El Domingo 13 de Septiembre de 2009 a las 19:21
ximena
# 11

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

Con Mozilla Firefox 3.5.8 y Windows XP
El Martes 23 de Febrero de 2010 a las 23:50