Una de las principales novedades que veremos en CSS3 es la facilidad de realizar esquinas redondeadas con una simple línea de código. Podremos despedirnos de aquellas épocas donde teníamos que poner 4 imágenes en cada esquina. Eso será prehistoria, cosa de gente incivilizada.
Si bien aún no podemos verlo funcionando al 100%, no pasará mucho tiempo para que los navegadores decentes lo implementen. Por lo que no esta demás poner el código respectivo en nuestros diseños hoy y así estar listos para el mañana, además que ahorraremos tiempo.
Si estas usando Internet Explorer y no ves a lo que me refiero, te recomiendo que bajes Firefox ahora y veas de lo que te pierdes.
El código
Las esquinas redondeadas en CSS3 se obtienen con:
border-radius: [valor]px;
Actualmente obtenemos lo mismo en los navegadores que usan el motor de renderizado Gecko (Firefox, Mozilla, Netscape, Galeon, Epiphany, Camino, Flock, etc), aumentando sólo -moz- al inicio del mismo código:
-moz-border-radius: [valor]px;
Recomendación.- Es mejor usar ambas opciones, de esta forma varios navegadores ya podrán mostrar las esquinas redondeadas. Cuando implementen CSS3, el código estará listo, sin necesidad de eliminar/cambiar nada.
Considerando esto, el código para el anterior ejemplo es muy simple:
<div style=" background-color: #047391;
<strong> -moz-border-radius: 10px;
border-radius: 10px;</strong>
border: 1px solid #0D324F;
padding: 20px;" >
Más variantes
A continuación presento más opciones de realizar variaciones con este código:
Podemos combinar las anteriores premisas, por ejemplo, si queremos bordes redondeados arriba izquierda y derecha:
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
También podemos usar 2 valores:
border-radius: 20px 10px;
-moz-border-radius: 20px 10px;
Nota.- Según CSS3 deberíamos de ver 4 esquinas iguales con elipses con radio horizontal de 20px y radio vertical de 10px. En cambio en Firefox se ven 2 esquinas alternas iguales de 10 px y las otras dos de 20px. Firefox aún no soporta el uso de elipses.
Y si usamos 4 valores obtenemos:
border-radius: 20px 10px 60px 30px;
-moz-border-radius: 20px 10px 60px 30px;
y un efecto de sombra al usar solo borde derecho e inferior:
border-bottom: 3px solid #999;
border-right: 3px solid #999;
Internet Explorer 7
En el blog de IE, cuando se les preguntó acerca si IE7 tendría esta nueva modalidad de CSS3, respondieron:
Los desarrolladores Web generalmente quieren usar esquinas redondeadas en sus páginas. Desde que nososotros no tenemos planes de hacer un soporte nativo a esquinas redondeadas en IE7 (que es una característica de CSS3), quiero señalar que hay un artículo disponible en MSDN que muestra como uno puede fácil y efectivamente implementar esquinas redondeadas a Internet Explorer hoy mismo. ¡Disfrutenlo! Link
Cabe resaltar que el enlace que dicen tiene un método fácil y eficiente nos lleva a una página que recomienda el empleo de tablas con 4 imágenes redondeadas en cada esquina. Una pesadilla de 17 líneas y 4 imágenes. -.-
Nosotros pedimos que se implementen estas novedades en la próxima versión de Internet Explorer, pero ellos nos hacen oídos sordos, y se van por lo que es más fácil … para ellos.
Si llegaste hasta aquí y aún usas Internet Explorer … no esperes más en abandonarlo y usar un navegador que se preocupa de respetar estándares y de estar más que actualizado en sus características. En otras palabras, cambia tu Volvo del 98 por un Mercedes 2006.
Baja Firefox es más rápido, seguro, liviano, con el podrás usar pestañas, extensiones y temas personalizables. Si quieres otras opciones, también te recomiendo Opera, Flock, o Camino. 