Uno de los elementos imprescindibles para cualquier sitio web al estilo 2.0 (junto con los degradados, reflejos y colores pastel) son las esquinas redondeadas (nótese la ironía).
Sabemos que hay técnicas para hacerlo mediante CSS e imágenes de fondo (¿quién no se acuerda de Redondeando esquinas (I) y Redondeando esquinas (II) ?).
En la especificación de CSS 3 podemos encontrar una forma más sencilla de hacerlo, mediante el atributo border-radius (especificación CSS 3 del W3C), mediante el uso de las siguientes propiedades: border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius. Aunque la implementación de esa propiedad ha sido irregular en los principales navegadores: puedes encontrar un resumen en can i use – border-radius.
Aquí va un resumen:
- Firefox: en las versiones 3.x las soporta mediante el prefijo
-moz(-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft). A partir de la versión 4, está previsto que siga la sintaxis del W3C. - Safari: al menos desde la versión 3.2 hasta la versión 4, soportaba esquinas redondeadas mediante el prefijo
-webkit(-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius). A partir de la versión 5 sigue la sintaxis del W3C. - Safari (iOS), desde la versión 3.2 hasta la 4.2 soporta las esquinas redondeadas con el prefijo
-webkit. - Chrome: al menos desde la versión 7, sigue la sintaxis del W3C.
- Opera: Desde la versión 10.5 soporta esquinas redondeadas con la sintaxis del W3C.
- Explorer: se espera que a partir de la versión 9 siga la sintaxis del W3C. Para versiones las versiones entre la 6 y la 8 – se puede usar CSS PIE. Hay circulando un error bastante insistente diciendo que a partir de cierta versión de Explorer soportaba esquinas redondeadas con el prefijo
-ms, pero como digo, es falso. - KonquerorA pesar de que ha habido gente que ha dicho que soportaba esquinas redondeadas con el prefijo
-khtml(yo entre ellos), lo cierto es hasta la versión 3.4 que no hay ninguna notica al respecto (se puede consultar en CSS 2.1 & 3 Support in KHTML 3.4).
En la especificación de CSS 3 podemos encontrar una forma más sencilla de hacerlo, mediante el atributo border-radius (especificación CSS 3 del W3C ) (recordemos, de momento es un borrador y pueden pasar años hasta que sea una recomendación). Pero hasta que llegue ese momento, y mientras se concretan los atributos y valores, cada motor de navegador que se precie (excepto Opera y Explorer ) tiene su propia implementación de esta propiedad, con sutiles diferencias. Hay que tener en cuenta que estas implementaciones de CSS se pueden cosiderar como una especie de versión beta , y que todavía no está claro que la especificación del W3C cambie más adelante (como lo ha hecho recientemente).
Aquí se recopilan las propiedades definidas por el W3C , mozilla, khtml y webkit . Empezando por el borde redondeado para toda la caja, y después para las esquinas individuales (esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, como las agujas del reloj).
W3C (borrador)
border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Mozilla (Firefox, SeaMonkey, K-meleon,…)
-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
Khtml (Konqueror)
-khtml-border-radius -khtml-border-top-left-radius -khtml-border-top-right-radius -khtml-border-bottom-right-radius -khtml-border-bottom-left-radius
Webkit (Safari, Chrome)
-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
Qué pasa con Opera y Explorer
Del Explorer se ha hablado en algunos sitios de una propiedad -ms-border-radius , pero no existe (¿todavía?). Y en Opera,… tampoco existe, pero, hay una forma de crear esas esquinas redondeadas usando como imágenes de fondo ficheros svg : puedes verlo en la sección Rounded corners del artículo New development techniques using Opera Kestrel (9.5).
Esquinas redondeadas usando javascript
Existe otra forma de lograr tener esquinas redondeadas en navegadores de versiones antiguas mediante javascript, como podemos ver en Nifty Corners Cube , jQuery Corners y probablemente unos cuantos cientos de sitios más.