17/12/2008 Categoría/s: CSS. 2 Comentarios

CSS3 y border-radius: esquinas redondeadas

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:

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.

-

Comentarios

  1. Sr. Ternasco escribió el 05/01/2009:

    Buen trabajo Gonzalo, pero se te ha ido la mano con:

    Webkit (Safari, Chrome)
    -khtml-border-radius
    -khtml-border-top-left-radius
    -khtml-border-top-right-radius
    -khtml-border-bottom-right-radius
    -khtml-border-bottom-left-radius

    En vez de -khtml- sería un -webkit- :)
    Verdad que sí?

  2. Gonzalo escribió el 07/01/2009:

    Sr. Ternasco, tienes toda la razón. Muchas gracias por avisar. Ya está corregido.

Comentar

Categorías