Esquinas redondeadas en Internet Explorer | border-radius

15 de Diciembre, 20088 Comentarios

De momento sólo podemos redondear esquinas con CSS en algunos navegadores (Firefox, Chrome), si estás viendo este blog verás según el navegador en el sidebar y en los subtítulos de este artículo el efecto de border-radius, el problema es que no es una propiedad estándar aún, así que debemos utilizar una propiedad particular para cada navegador que redundará en la validación de nuestro CSS.

Redondear esquinas en navegadores modernos (Firefox, Konqueror, Safari, Chrome)

border-radius: 3px; // propiedad CSS3
-ms-border-radius: 3px; // para IE 8
-moz-border-radius:3px; // Firefox
-webkit-border-radius: 3px; // WebKit y Safari
-khtml-border-radius: 3px;

Esperando que los navegadores apliquen la especificación CSS3 correctamente para poder utilizar la propiedad border-radius para redondear esquinas. Concretamente esperamos que uno de los navegadores más utilizados, no el más popular, Internet Explorer, lance su versión 8, en esta página de microsoft puedes ver la comparativa de las diversas propiedades soportadas por las versiones de IE. Otra razón para que elijas al mejor navegador.

3 soluciones para redondear esquinas en Internet Explorer 7 y anteriores:

Javascript

Con este método solucionarás también el problema de los PNG transparentes en IE. Se añade a una clase y funciona en:

Firefox
Navegadores Webkit
Internet Explorer 6 | Internet Explorer 7
Descargas el js

HTML

<script src="DD_roundies.js"></script>
<script>
    DD_roundies.addRule('.box', 10);
</script>

Demo y web oficial

Archivo htc

Descargas el archivo htc de esta dirección y lo subes al servidor. Funciona en todos los navegadores.

HTML

<div class="curved">Div con esquinas redondeadas</div>

CSS

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}

Web oficial [en]

Sólo VML

HTML

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<v:roundrect arcsize=".02" fillcolor="#000">
Lorem ipsum dolor sit amet, consectetuer adipiscing
</v>

CSS

v\:roundrect  {
    behavior:url(#default#VML);
    }
v\:roundrect {
    color:#FFF;
    display:block;
    background-color:#000;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:20px;
    height:100%;

    /* IE-specific */
    behavior:url(#default#VML);
    /background-color:transparent;
    }