Bordes redondeados en Internet Explorer

Bordes redondeados ... si algo no se redondea no es cool y bueno, todos terminamos sucumbiendo a la tendencia y eso no es ni malo ni bueno. Todos menos Internet Explorer porque allí, redondear esquinas es imposible y, aunque se había anunciado que esa propiedad iba a ser agregada a IE8, tal cosa no ha ocurrido y todos se quejan aunque, erróneamente, son muchos los sitios que hablan de esa propeidad y eso provoca confusión entre los usuarios.

¿Que se dice? Que las propiedad para redondear bordes establecida por la w3org es:

border-radius: valor;

pero, los navegadores aún no la han implementado, por ahora, cada uno de ellos utiliza una propiedad específica:

-moz-border-radius: valor; /* Firefox, SeaMonkey, K-meleon y los que usan el motor Gecko) */
-webkit-border-radius: valor; /* Google Chrome, Safari y los que usan el motor WebKit */
-khtml-border-radius: valor; /* Konqueror */

incuso IE invento la suya pero jamás la implemento así que esto, no funcionará:

-ms-border-radius: valor;

Moraleja, IE no tiene propiedades CSS para redondear esquinas y si queremos hacerlo debemos utilizar JavaScript (Nifty Corners Cube o jQuery Corners, etc). En este sentido, dillerdesign.com ha creado un código muy liviano y bastante simple que permite que redondeemos esquinas en IE, incluso en versiones viejas. Lo llamaron DD_roundies y el script lo podemos descargar en su versión minimizada de sólo 12KB.

Lo agreamos antes de </head>:

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

A partir de ahí, podemos usarlo de dos maneras, limitándolo a IE o aplicándolo a todos los navegadores. La sintaxis genérica es esta:

DD_roundies.addRule('CLASE', 'VALOR', 'MODO');

donde:

CLASE es el selector a usar, la clase CSS del elemento HTML a redondear
VALOR es el tamaño de la curva y pueden definirse entre uno y cuatro valores separados por comas
MODO es opcional y define si el script se aplciará atodos lso navegadores (TRUE) o sólo a IE (FALSE)

A la función la podemos llamar antes de </head>, definiendo clases diversas, por ejemplo:

<script>
  DD_roundies.addRule('.ejemplo1', '15px');
  DD_roundies.addRule('.ejemplo2', '30px 0 20px 0');
  DD_roundies.addRule('.ejemplo3', '20px', true);
</script>

Así que bastaría colocar esas clases en un elemento HTML para que funcionara:

En este ejemplo, el script sólo afectará a IE ya que no agregamos el tercer parámetro (por defecto es FALSE):

<div class="ejemplo1"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

En este ejemplo ocurre lo mismo, salvo que redondeamos sólo dos esquinas:

<div class="ejemplo2"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

En los dos primeros, si quisiéramos, podríamos establecer las propiedades para el resto de los navegadores del mismo modo que hacemos habitualmente, definiiendo una clase:

.ejemplo1 {
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  -khtml-border-radius:15px;
}

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.

Por útimo, si queremos queremos que el script agregue un borde en todos los navegadores, colocamos el parámetro TRUE que es lo que está definido en el tercer ejemplo:

<div class="ejemplo3"> contenido </div>

In facilisis enim sit amet lacus congue tristique. Aenean luctus mollis enim, non tincidunt tellus sodales nec. Aenean massa nisl; egestas ut bibendum luctus, iaculis vitae orci. In quis erat mi, quis luctus eros. Nam facilisis mauris at tellus bibendum semper. Vestibulum accumsan, sapien ullamcorper suscipit convallis, sapien magna venenatis enim, ut congue nunc orci ut erat.