Todos los diseñadores web que nos hemos visto ante la tarea de crear capas con esquinas redondeadas hemos estado siempre ante una disyuntiva: ¿creo las capas con esquinas redondeadas usando imágenes,  o las creo usando CSS3?

Crear las esquinas redondeadas usando imágenes nos garantiza que se verán bien en todos los navegadores, pero con un pequeño (gran) problema: si queremos modificar el tamaño de la capa, también tenemos que modificar las imágenes que crean dichas esquinas redondeadas, lo cual resulta algo incómodo. Entonces tenemos la segunda opción, usemos CSS3! Excelente, pero como todo, esto tambien tiene sus pros y sus contras, entre los puntos a favor se cuentan un mayor control sobre cada esquina a redondear y que, además, las esquinas se ven mucho mejor que si las hiciésemos con imágenes. Pero hay una contra: las podemos implementar en todos los navegadores, menos en Internet Explorer 7 y versiones anteriores. Si, eso es un plomazo, créanme, pero por suerte hay un pequeño script, que les voy a mostrar a continuación, que logra realizar esas esquinas redondeadas en IE7 y versiones anteriores. Buenísimo, no?

Para los otros navegadores, la propiedad border-radius se aplicaría de la siguiente manera:

border-radius:2px;//esta es la propiedad CSS3.
-webkit-border-radius-top-left:2px; //webkit se usa para Safari y WebKit.
-webkit-border-radius-top-right:2px;
-webkit-border-radius-bottom-left:2px;
-webkit-border-radius-bottom-right:2px;
-moz-border-radius-topleft:2px; //Mozilla Firefox.
-moz-border-radius-topright:2px;
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:2px;
-khtml-border-radius:2px; //Google Chrome.
-ms-border-radius:2px; //IE8 +


Y ahora la pregunta del millón: ¿cómo hago para que todo esto funcione con IE7 y versiones anteriores? Pues de la siguiente manera: te descargas un documento JavaScript, en dos versiones, versión full, o bien la versión min.


Luego tienes que llamarlo desde la etiqueta <head> de tu html de la siguiente manera:


<script src="DD_roundies.js"></script>




Y luego agregar lo siguiente:


<script>DD_roundies.addRule('.yet_another', '5px', true);</script>




Y listo! Tenemos esquinas redondeadas con CSS para absolutamente todos los navegadores. Excelente! Hasta el próximo post!


Sitio Oficial