xposible

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 ) (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.