Border-radius en Internet Explorer

El objetivo de todo diseñador web y el motivo por el cual luchamos cada día es que cada uno de nuestros diseños se vean excelentemente bien en la mayoría de lo navegadores comunmente usados, para como no todo puede ser perfecto, Micro$oft siempre tiene una cartita bajo la manga que nos complica la vida.

Hoy nos reunimos para lograr bordes redondeados usando “border-radius“, una de las propiedades estrellas implementadas en CSS3, y hacerlo de tal manera que funcione en IE, porque para los otros navegadores lo podemos lograr facilmente:

El CSS:

.borde-redondeado {
	-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 */
}

EL HTML:

<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados con CSS3</div>

Ahora, hay 2 formas que conozco para lograr los bordes redondeados en IE y son la siguientes:

1. Usando un archivo HTC

Utilizando un archivo HTC creado por Remiz Rahnas de HTML Remix y que se puede bajar desde Google Code podremos lograr el efecto utilizando una hoja de estilos exclusiva para IE o agregando la propiedad dentro del css anterior.

Se debe cargar el archivo “border-radius.htc” en la misma carpeta donde se encuentre nuestra hoja de estilos.

En una hoja exclusiva para IE:

EL CSS:

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

EL HTML:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados</div>

o 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 */
}

EL HTML:

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

DEMO

2. Usando jQuery

También se puede lograr el efecto utilizando la librería jQuery, con un plugin llamado jQuery.Corner, el cual permite no solo bordes redondeados, sino que bordes mas complicados que no sé como describir.
EL JS:

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

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 sus bordes redondeados con jQuery</div>

Conclusión

No usar IE…
…pero si se usa, con estos métodos que vimos podemos lograr bordes redondeados “cross-browser” lo que representa una ayuda y un alivio para los que somos extremistas del detalle y no nos conformamos con la técnica de “mejora progresiva” en CSS.

[adsense]

  • carlos

    me sirvió para hacer mi trabajo muy bueno 🙂

  • Programador X

    IE hiede, emana por todos sitios. Debería estar prohibido por ley esa basura… xD.

    Gracias por todo, se agradecen estos consejos a los que estamos empezando.

    • haha, si, la verdad es que IE es el virus más grande y ningún antivirus lo reconoce… que mal xDD

  • La conclusión esta genial… ya que IE da muchos dolores de cabeza.

  • Increíble funciono a la perfección, muchas gracias 😀

  • Lord Ralf

    La pagina web del demo tiene código malicioso.

    • Gracias por alertarnos lord, la verdad es que sufrimos un ataque masivo, y todos los sitios alojados en nuestro servidor sufrieron las consecuencias. Vamos a intentar corregir esto, pues ha sido una tarea titánica. Saludos.