Los diferentes navegadores nos ofrecen implementaciones propias, fuera de cualquier estandar, con la promesa de, en poco tiempo, implementar el standart que recomienda el w3c.

Propiedad CSS3 Estandar

Esta es la propiedad que todos los navegadores deberian implementar, sin embargo eso no sucede. Es bueno colocarla desde ya.

.rounded-corners

{

border-radius: 10px;

}

Esta propiedad puede descomponerse de la siguiente manera:

.rounded-corners

{

border-top-right-radius = 10px;

border-bottom-right-radius = 10px;

border-bottom-left-radius = 10px;

border-top-left-radius = 10px;

}

Las siguientes propiedades solo serán interpretadas por los navegadores correspondientes.

Firefox

Firefox desde hace ya un tiempo (desde la versión 1.5 en adelante) dispone de esta propiedad para esquinas redondeadas. Las propiedades que solo funcionan en Firefox comienzan con -moz.

.rounded-corners

{

-moz-border-radius: 10px;

}

Y descompuesta:

.rounded-corners

{

-moz-border-radius-topright = 10px;

-moz-border-radius-bottomright = 10px;

-moz-border-radius-bottomleft = 10px;

-moz-border-radius-topleft = 10px;

}

Internet Explorer

Solo Internet Explorer 8 (modo IE=8) podrá reconocer esta sintaxis.

.rounded-corners

{

-ms-border-radius: 10px;

}

y sus componentes:

.rounded-corners

{

-ms-border-radius-topleft: 10px;

-ms-border-radius-topright: 10px;

-ms-border-radius-bottomleft: 10px;

-ms-border-radius-bottomright: 10px;

}

Más información sobre IE y CSS.

WebKit y Safari

Estos son navegadores novedosos, y esta es su propuesta:

.rounded-corners

{

-webkit-border-radius: 10px;

}

En partes:

.rounded-corners

{

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-top-left-radius: 10px;

}

Konqueror

Hasta konqueror nos ofrece soluciones:

.rounded-corners

{

-khtml-border-radius: 10px;

}

y...

.rounded-corners

{

-khtml-border-radius-topleft:10px;

-khtml-border-radius-topright:10px;

-khtml-border-radius-bottomleft:10px;

-khtml-border-radius-bottomright:10px;

}

Opera

Opera ha sido una desilusión, no presenta nada similar a los demás navegadores. Pero al tener soporte de SVG podemos hacer algo asi (esta solución funciona con Safari y Firefox también):

.rounded-corners

{

background: silver url("images/roundedcorners.svg");

}

Y el SVG:

  <rect fill="white"  x="0" y="0" width="100%" height="100%" />

  <rect fill="silver"  x="0" y="0" width="100%" height="100%" rx="10px"/>

Los navegadores que no soporten SVG, ignorarán la declaración anterior.

Clase CSS para esquinas redondeadas

Hoy día, necesitamos colocar todas, aunque esto haga que el validador de CSS falle.

.rounded-corners

{

border-radius: 10px;

-ms-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

}

Actualmente demasiado código para algo que una sola propiedad (la primera) deberia definir.
Y recuerden que podemos hacer cosas asi:

.rounded-corners

{

border-radius: 10px 0 2em 4pt;

-ms-border-radius: 10px 0 2em 4pt;

-moz-border-radius: 10px 0 2em 4pt;

-webkit-border-radius: 10px 0 2em 4pt;

-khtml-border-radius: 10px 0 2em 4pt;

}

Por lo que nuestro CSS engordará bastante y quedará muy poco legible... es lo que hay hoy día.

Existen otras soluciones utilizando imágenes extra, marcado (x)html adicional, javascript... la idea de este artículo es la de utilizar solo CSS, para que cuando tengamos que sonreir recordando el pasado (los navegadores implementaron border-radius...) solo debamos modificar el archivo CSS y nada más.

Les agrego una aplicación online que genera el código necesario para crear cajas con bordes redondeados.