Hace algunos días que ya os hablamos de la estupenda propiedad de CSS3 border-radius.

Bien, me ha parecido interesante dar un repaso más amplio a esta propiedad por las amplias posibilidades que tiene.

Antes de empezar, dejemos clara una cosa: border-radius tan solo funciona en los navegadores más avanzados que han empezado ya a implementar en sus motores características del nuevo estándar para las hojas de estilo en cascada CSS3. Esto quiere decir que solo Firefox con su motor Gecko, Safari con Webkit  y Konqueror con khtml (por citar los más conocidos) son los únicos navegadores en los que funcionará la propiedad border-radius. Ni Opera, ni por supuesto Internet Explorer la soportan todavía.

Como comentamos en la entrada anterior, podemos aplicar bordes redondeados a un elemento haciendo uso de:

-moz-border-radius para Firefox.

-webkit-border-radius para Safari.

-khtml-border-radius para Konqueror.

Pero, ¿que pasa si queremos que tan solo las esquinas inferiores del elemento sean redondeadas, y las superiores rectangulares?

En ese caso, debemos especificar que esquina es la que queremos redondear, y con cuantos pixeles. Sería así:

Para Firefox (Gecko):

Para Safari (Webkit):

Para Konqueror (khtml):

Como podeis ver, Webkit y khtml usan la misma nomenclatura, mientras que Gecko crea la suya propia.
Con esto, podemos aplicar diferentes radios a las esquinas de cada capa.

¿Las posibilidades? Infinitas. Ahora tan solo queda esperar a que todos los navegadores implementen estas propiedades, para dar un paso adelante en temas de maquetación, y olvidarnos de muchos problemas con imágenes, javascripts y demás…

Sin embargo, no dudes en usar estas propiedades si realmente las necesitas, siempre que la versión resultante para los navegadores “no tan avanzados”, sea igualmente accesible y usable. Es simplemente, mejorar la experiencia del usuario que utilice el navegador adecuado.

Y vosotros, ¿ya usais -border-radius en vuestros proyectos? ¿No? ¿Y a qué esperáis?

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.