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]