Border-radius para Internet Explorer con CSS y jQuery

Todos queremos que la plantilla de nuestro blog se visualice bien en todos los navegadores. La etiqueta border-radius permitía aplicar bordes redondeados a cualquier contenedor. Lo malo, es que esta función no está disponible en Internet Explorer, y cada vez que se visitaba un blog, los contenidos con border-radius aplicado no se veían bien.

Eso desde luego, era una completa pesadilla, cuando otros navegadores eran compatibles con esta funcionalidad: Chrome, Firefox... Pero, ahora, hay dos soluciones a este problema.

El tutorial:

El código normal a implementar sería:

.borde-redondeado-ayudabloggers {
-webkit-border-radius: 10px; /* border-radius para Safari y Chrome */
-moz-border-radius: 10px; /* border-radius para Firefox */
-khtml-border-radius:10px; /* border-radius para navegadores Linux */
border-radius: 10px; /* CSS3 Estándar */}

Aquello marcado en verde se puede eliminar posteriormente ya que son solo comentarios.


El HTML normal a insertar sería:

<div class="borde-redondeado-ayudabloggers">Este contenedor tiene implementado el estilo border-radius</div>

Lo que está en azul se puede cambiar posteriormente por el contenido deseado.

Aquí os dejo un live-demo (recordad que este live-demo está hecho con los atributos normales por lo que en Internet Explorer no funciona)

Demo con CSS normal

Este contenedor tiene aplicado border-radius

Opción 1: Usar un archivo .HTC:

NOTA: La opción 1 es relativamente complicada, por lo que aconsejo llevar a cabo correctamente los pasos, y asegurarse de que no hay nada equivocado.

Para lograr que border-radius funcione en Internet Explorer debemos crear un archivo HTC . Se puede bajar desde Google Code.

Importante: Se debe cargar el archivo como "border-radius.htc" en la misma carpeta donde se encuentre alojada nuestra hoja de estilos.

En la hoja exclusiva para Internet Explorer el CSS a pegar es:

.borde-redondeado {
border-radius:10px;
behavior: url(border-radius.htc);
}

Y el HTML a insertar sería:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<div class="borde-redondeado">Este contenedor tiene aplicado el estilo border-radius</div>

También se puede hacer todo de una vez usando el código del primer ejemplo. El CSS:

.borde-redondeado-htc {
-webkit-border-radius: 10px; /* Para Safari y Chrome */
-moz-border-radius: 10px; /* Para Firefox */
-khtml-border-radius:10px; /* Navegadores de Linux */
border-radius: 10px; /* CSS3 */
behavior: url(border-radius.htc); /* Para IE */
}

Ahora, obviamente, el HTML:

<div class="borde-redondeado-htc">Este contenedor tiene sus bordes redondeados con CSS3 y magia para IE</div>

Opción 2: Bordes Redondeados con jQuery:

Esta opción es muchísimo más fácil de realizar que la anterior, y se lleva a cabo con la extensa librería de jQuery, con un plugin que he encontrando en la web llamado jQuery Corner, el cuál permite un abanico de posibilidades indescriptibles. Un plugin muy completo. 

El jQuery a insertar es:

$(".borde-redondeado-jquery").corner("10px");

Ahora hace falta añadir los scripts y el HTML:

<script src="jquery-1.3.2.min.js"></script>
<script src="jquery.corner.js"></script>
<div class="borde-redondeado-jquery">Este contenedor tiene border-radius aplicado gracias al plugin jQuery Corner</div>

Aquí os dejo también otro live-demo para que puedan comprobar el resultado con Internet Explorer:

Este contenedor tiene aplicado border-radius con el plugin jQuery Corner.

Eso si, si queremos evitarnos todo este lío, no uséis Internet Explorer. Yo os recomiendo Google Chrome (fácil de usar, simple y accesible y muy rápido) o Mozilla Firefox.  Aquí os dejo un archivo para descargar con toda lo necesario (incluido la hoja exclusiva para IE .HTC)

• Más detalles en HTMLRemix
• El contenido está bajo licencia Creative Commons 3.0 BY
• Los códigos están bajo licencia GNU GPL v3

NOTA: Entiendo que este tutorial es largo y complicado, así que si tienen alguna duda, por favor comentenla y yo le ayudaré.