Utilizando CSS3 hoy (1): Bordes Redondeados

Acabo de leer el libro de Dan Cederholm Handcrafted CSS, que me ha parecido muy bueno. En general el libro gira sobre dos ideas:

- Siempre hay que preguntarse cuando se desarrolla una web ¿qué pasaría si…? para estar preparado ante cualquier circunstancia que pueda alterar los distintos componentes de la web y hacerlos distintos a como nosotros los habíamos previsto (por ejemplo incrementando el tamaño del texto). Eso lo llama “web a prueba de balas” y “desarrollo artesano”, es decir, con atención al detalle.

- La idea de que no tiene por qué verse igual nuestra web en todos los navegadores. Dan Cederholm reivindica que se utilice ya CSS3, soportado por los navegadores más nuevos (en ocasiones sólo por Safari, Chrome y Firefox, e incluso sólo por Safari), siempre que no afecte a la usabilidad y accesibilidad del sitio cuando se vea con otro navegador que no soporte CSS3 (básicamente Internet Explorer). Es decir, que bajo IE6 se pueda usar y leer perfectamente nuestra web, aunque no sea tan “bonita” como cuando se usa un navegador moderno. Pero claro, para tomar una decisión como esta antes hay que conocer qué porcentaje de nuestros usuarios utilizan IE6, por ejemplo, y luego decidir si estamos dispuestos a que vean una web “más fea” siendo un porcentaje de usuarios alto los que lo usan…

Aprovechando esta última idea voy a empezar a hablar sobre las novedades más importantes que, aparte de los selectores, aporta CSS3 y que podemos empezar a utilizar ya en nuestros diseños (teniendo en cuenta que no se verán en algunos navegadores). Para no hacer muy largo el artículo voy a ir desgranando cada novedad en artículos diferentes. Hoy empezaré con los bordes redondeados, probablemente la novedad más conocida.

Bordes Redondeados

Si hasta ahora teníamos que utilizar imágenes para obtener bordes redondos en nuestros diseños ahora estos se pueden conseguir gracias a CSS3. Para ello aplicamos al elemento al que le queremos redondear los bordes la propiedad border-radius.

Sin embargo esta propiedad aún no está recogida tal cual por los navegadores. Internet Explorer no lo recoge en ninguna de sus versiones (lo han prometido para Internet Explorer 9). Sí está recogida en cambio por Safari y Chrome (utilizando el prefijo-webkit-) y por Firefox (utilizando el prefijo -moz-).

Vamos a poner un ejemplo. Supongamos que tenemos un DIV de 100px de ancho y 100px de alto con color de fondo rojo que queremos que tenga unas esquinas redondas con un radio de 10px:

El resultado sería este:
esquinas

Podemos redondear incluso algunas esquinas y otras no, desplegando la propiedad en todas sus esquinas. Por ejemplo, si queremos que sea redonda sólo la esquina superior derecha:

El resultado sería:
esquina

En el caso de alterar varias esquinas, pero no todas, podemos abreviar:

Vemos como hay una ligera diferencia entre la expresión de webkit (Safari y Chrome) y la de Mozilla (Firefox). Aquí tenemos un detalle de todas ellas:
border

Yo suelo utilizar border-radius mucho en los formularios, para redondear las casillas del mismo. ¿Que en Internet Explorer se ven cuadradas? No pasa nada, no afecta al formulario. Vamos a verlo:

Y aplicando estos estilos:

Quedaría:
formulario

Vemos que hemos redondeado los bordes de los elementos. En internet Explorer 8 se vería así:
formulario_ie

Como se ve todo aparece sin problemas en Internet Explorer. Los bordes no aparecen redondeados, pero no supone ningún problema para el uso del formulario. Lo único que estamos haciendo es ofrecer diseños más avanzados a aquellos usuarios que utilizan navegadores más modernos, pero sin afectar a la usabilidad y accesibilidad de la web.

Seguiremos en breve con otra propiedad de CSS3, los colores utilizando RGBA.

Lecturas recomendadas

BuildInternet, Using Rounded Corners with CSS3
Smashing Magazine, CSS 3 Cheat Sheet (PDF)
Elliotswan, 9 CSS3 properties you can use now
CSS3.info, CSS3 Previews

7 comentarios en “Utilizando CSS3 hoy (1): Bordes Redondeados

  1. esta muy bueno :) pero deberiar aser algo por ie explorer que es un problema no se notan las esquinas redondeadas estoy buscando algo que m ayude en eso ahora mi problema es al verse por ie explorer si tienes algun tipo de solucino por favor enviame un mensage a mi correo gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">