CSS3 y border-radius: esquinas redondeadas

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

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.

← - →

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