CurvyCorners: Redondeando Internet Explorer

JMiur

CurvyCorners es un script que nos va a permitir utiliar curvas en Internet Explorer y otros navegadores donde la propiedad CSS3 no está disponible.

En principio, todo lo que debemos hacer es descargar el ZIP desde la página de los desarrolladores y allí veremos varios demos y los archivos necesarios que, en realidad, sólo es uno: el script en si mismo, que viene en dos versiones, una minimizada (curvycorners.js) y otra no (curvycorners.src.js) así que, cualquiera de ellas, la subimos a un servidor y la agregamos a nuestra plantilla antes de </head>:

<script type="text/javascript" src="URL_curvycorners.js">

o bien, copiamos su contenido y lo pegamos directamente:

<script type='text/javascript'>

//<![CDATA[
... aquí pegamos el contenido del archivo ...
//]]>
</script>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida.

¿Qué más? Nada. Si no queremos opciones, eso es todo, el script se encargará del resto, basta que el CSS tenga las propiedades agregadas con la sintaxis de Chrome:

.redondeado {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}

o bien:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus.

Obviamente, nada es perfecto y esto tiene sus limitaciones:

los elementos redondeados por el script no peuden ser redimensionables.
si tiene bordes, conviene que sean del mismo ancho
no pueden usarse bordes que no sean de estilo sólido
no interpreta bordes elípticos
las etiquetas IMG no se redondean, deben colocarse dentro de un DIV

Además, siempre se deben usar reglas de estilo con referencias a IDs o clases; por ejemplo:

.redondeado {}
#ejemplo {}
#ejemplo div.redondeado {}

y elemento a redondear es el que debe ser identificado por un ID o clase asi que estos ejemplos no funcionarían:

#ejemplo div {}
div #ejemplo {}
div.redondeado #ejemplo {}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

En todos los casos, si hay un error o el script no puede modificar algo, aparecerá una ventana indicando el problema; llegado el caso, eso puede obviarse agregando lo siguiente: