Fue en el boom de la web 2.0 cuando se empezaron a ver capas con bordes redondeados.

Por aquel entonces se usaban técnicas enrevesadas para conseguir un efecto que llamaba mucho la atención, después de estar acostumbrados a los típicos rectángulos que se conseguían al asignar un color de fondo a las celdas de las tablas, o incluso a las capas.

Imágenes que se asignaban como fondo a capas antes y después del elemento e incluso complicados javascripts para conseguir el efecto eran casi el pan nuestro de cada día.

Con la llegada de las primeras versiones de CSS 3, se creo una nueva propiedad para facilitar la vida a los diseñadores web: border-radius. Tan sencillo como asignar el radio de la curva y conseguimos el efecto deseado, sin tener que cargar con imágenes innecesarias o pesados scripts.

Desgraciadamente, esta propiedad aún no está soportada por ningún navegador. Para solventar esto, los equipos de desarrollo han creado su propio border-radius, para que funcione solamente, en los navegadores que usen su motor.

Así, nos encontramos con -moz-border-radius para Firefox, -webkit-border-radius para navegadores basados en webkit (safari, tanto para Windows como para mac os x), y la no tan conocida -khtml-border-radius para navegadores basados en el motor khtml (Konqueror de Linux).

El funcionamiento es el mismo para las tres opciones:

No tengo ninguna duda de que en el momento en el que se establezca la versión definitiva de CSS 3, los navegadores de calidad la soportarán tal cual es, sin ningún añadido “propio”, por lo que no está de más agregar la propiedad original border-radius en nuestra hoja de estilos, para futuros cambios o para navegadores que aún no la soportan (entre ellos, sorprendentemente, está Opera 9.5).

Personalmente, ya no utilizo nunca en mis diseños ni imágenes ni técnicas “inusuales” para conseguir los bordes redondeados en las capas. Si el usuario utiliza un navegador que no soporta esta propiedad… mala suerte.

Podeis obtener más información sobre la propiedad border-radius, y como la interpretan los navegadores que la soportan en este artículo: border-radius. Apple vs Mozilla.

Si eres nuevo, puedes subscribirte a nuestras noticias por RSS feed. Gracias por tu visita!

Esta noticia se publicó el , Miércoles, Julio 9th, 2008 a las 23:41 y se encuentra dentro de las categorias CSS, Developers, Noticias . Si quieres subscribirte a los RSS 2.0. También puedes responder a los mensajes.