Esquinas redondeadas en Internet Explorer | border-radius

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 (Actualización: no sirve, fue una especulación
 pero no funciona en IE8)
-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 7Descargas 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;
    }

Demo

Fuentes y artí­culos relacionados:

Autor: Cristian Eslava

Trabajo como autónomo, mejor dicho freelance, desde comienzos de siglo. Soy blogger, diseñador y formador, no necesariamente en ese orden. Si necesitas servicios de diseño, formación o publicidad contáctame, estaré encantado de colaborar.

Más sobre mi en "Mis confesiones"

Cristian Eslava

16 comentarios

  1. Es curioso la propiedad ms-border-radius no está implementada.

  2. ceslava dice:

    Sí­, al final no podemos utilizar esa propiedad en IE8.

    En este otro artí­culo publico 24 técnicas más:

    http://ceslava.com/blog/24-tcnicas-ms-esquinas-redondeadas-con-slo-css/

    Saludos

  3. Alguien puede decirme porque en internet explorar no funcionan las esquinas redondeadas con css?

  4. Alex dice:

    CurvyCorners.

  5. fun pic dice:

    estoy viendo como hacerlo en opera.

  6. ST dice:

    Yo utilice el metodo del archivo HTC, pero cuando le pongo algun fondo con repeat-x o no-repeat no le hace caso a esta propiedad y aun asi se repite por todos lados. Hay alguna manera de arreglar esto?

  7. ceslava dice:

    Hola ST,

    Deja por favor en el foro tus dudas: http://foro.ceslava.com

    Saludos

  8. Gonzalo dice:

    Por favor, elimina la regla de esquinas redondeadas para explorer. No funciona, no está implementado y se está confundiendo a mucha gente.

  9. ceslava dice:

    Hola Gonzalo,

    Tienes toda la razón, hace más de un año cuando se publicó este artí­culo se especulaba con ms-border-radius pero nunca funcionó en IE8.

    Editado.

    Gracias por recordarlo.

  10. Kol dice:

    behavior: url(ie-css3.htc) y podras usar el estandar en IE sin problemas.

  11. Jesús dice:

    ¿Existe alguna página que contenga scripts, hacks o códigos para la mayoria de propiedades css3 y compatibilizar todos los navegadores?

  12. ceslava dice:

    Hola Jesús,

    Seguro que debe haber varias, te adelanto que usar todas las propiedades CSS3 y que no den problemas en IE es harto difí­cil, hay hacks y filtros para algunas cosas pero no todas tienen solución.

    Una página que recomiendo es http://css-tricks.com/ de ella he aprendido bastantes truquitos de CSS.

    Saludos

  13. somebody dice:

    Internet Explorer es el peor navegador del mundo… únanse a la causa y usen un navegador que cumpla los estándares.

Trackbacks/Pingbacks

Tu comentario