Redondear esquinas en Internet Explorer

Publicado por el día 15 Abr, 2010 | 6 comentarios


Hoja de estilo CSS

Hoja de estilo CSS

A la hora de crear una página web, siempre llega un momento delicado para todo desarrollador, darle el aspecto deseado a tu página de manera que se vea igual (o lo más parecida posible) en todos los navegadores.

Esto, a veces, no es tan fácil, puesto que unos navegadores cumplen con unos estándares y otros no.

El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores. Para el que no esté familiarizado, las hojas de estilo o CSS, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

Y aquí es donde nos solemos encontrar con los problemas, las características de CSS3 (soportadas por Mozilla Firefox, Google Chrome, Safari…) incluyen la propiedad border-radius, la cual define la curvatura que debe tener el borde de un elemento. Esta propiedad es muy usada por los diseñadores gráficos por su estética, pero en el caso de Internet Explorer, IE 6 y 7 sólo dan soporte para CSS1 y la versión de IE 8 sólo soporta hasta CSS2.

Sin embargo, ya tenemos una solución para poder ver nuestros elementos redondeados en IE 6, 7 y 8. Es un script escrito por Remiz y muy fácil de usar. Sólo tienes que seguir estos pasos:

  • Descargate el archivo border-radius.htc o la demo.
  • Sube el archivo al mismo directorio donde se encuentra tu archivo de estilo .css ( En wordpress suele ser: wp-content/themes/nombre-de-tu-tema/ ).
  • Añade a tu hoja de estilo la clase:
  • .curved {
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(border-radius.htc); /* This lets IE know to call the script on all elements which get the 'box' class */

    }

  • Por último, dale el estilo a los elementos de tu página que desees, por ejemplo:

<div class=”curved” style=”background: url(http://example.com/photo.jpg);”></div>

¡Listo!, ahora tu imagen photo.jpg aparecerá con los bordes redondeados y sombra en todos los navegadores 😀

Nota: Nick F. ha ampliado funcionalidades, puedes echarle un vistazo a su tutorial en inglés y al artículo que ha escrito aNieto2k.