Esquinas Redondeadas en todos los Navegadores

CSS3 Logo

Las esquinas redondeadas dan un mejor aspecto (según el caso) a un sitio web. Lograrlo Conseguir ese efecto solo con CSS puede resultar algo un poco incómodo por el soporte que le dan los diferentes navegadores actuales.

Estos código muestran las diferentes alternativas que se pueden utilizar en los navegadores modernos, veamos.

La Propiedad Standard

CSS3 ofrece a todos los navegadores un standard que deberían soportar, pero no suele pasar así, por lo tanto hay que usarla. Opera comenzó a darle soporte a esta propiedad desde la versión 10.5.
[css]
.esquina-redonda{
border-radius: 10px;
}
[/css]

Firefox

Desde hace desde la versión 1.5 en adelante soporta esta propiedad para esquinas redondeadas. Las propiedades que solo funcionan en Firefox comienzan con -moz. En mi Opinión personal Firefox interpreta el código CSS.
[css]
.esquina-redonda{
-moz-border-radius: 10px;
}
[/css]

Internet Explorer

Esta propiedad solo es soportada en IE8. En mi opinión personal pienso que IE por cada versión que lanzan cambian el fuente y los programadores, porque nunca soporta nada.
[css]
.esquina-redonda{
-ms-border-radius: 10px;
}
[/css]

Si eres de los que les gusta romperse la cabeza tratando de hacer un sitio compatible con IE mas Info.

WebKit y Safari

Navegadores novedosos como Google Chrome y Safari que utilizan webkit.
[css]
.esquina-redonda{
-webkit-border-radius: 10px;
}
[/css]

Konqueror

Hasta este navegador ofrece solución.
[css]
.esquina-redonda{
-khtml-border-radius: 10px;
}
[/css]

Opera

Antes de la versión 10.5 opera no soportaba esta propiedad y aqui está una solución para los que piensan que aun se le puede dar soporte.
[css]
.esquina-redonda{
background: silver url("images/rounded-corners.svg");
}
[/css]

El SVG
[html]
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="10px"/>
[/html]

CSS para Esquinas Redondeadas en Todos Los Navegadores

Hoy día necesitamos utilizar todas las propiedas aunque el validador de CSS de W3 falle.
[css]
.esquina-redonda
{
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}
[/css]

Actualmente es demasiado código para algo que debería hacer una sola propiedad (la del standard CSS).

Hasta que las compañías y comunidades que dan soporte a los navegadores no se comprometan a cumplir el standard esteremos teniendo problemas de código, tratando de hacer que nuestro sitio sea compatible con todos los navegadores, cuando ellos deberían ser compatible con nuestro sitio.
Recomendado