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>
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; }
Fuentes y artículos relacionados:
- IE8 y el futuro CSS
- Rounded Corners in Internet Explorer [en]
- Bordes Redondeados con CSS
- Bordes redondeados en Internet Explorer
Es curioso la propiedad ms-border-radius no está implementada.
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
Voy corriendo a verlo xD
Alguien puede decirme porque en internet explorar no funcionan las esquinas redondeadas con css?
CurvyCorners.
estoy viendo como hacerlo en opera.
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?
Hola ST,
Deja por favor en el foro tus dudas: http://foro.ceslava.com
Saludos
Por favor, elimina la regla de esquinas redondeadas para explorer. No funciona, no está implementado y se está confundiendo a mucha gente.
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.
behavior: url(ie-css3.htc) y podras usar el estandar en IE sin problemas.
Trackbacks/Pingbacks/Retweets
Nuevo artículo: http://tinyurl.com/5qzryz – Esquinas redondeadas en Internet Explorer | border-radius
Comentario de 24 técnicas más | Esquinas redondeadas con sólo CSS | ..: Cristian Eslava | Diseño Gráfico / Web |.. http://tinyurl.com/bhzvof
[...] un tiempo os hablaba de 3 soluciones para Esquinas redondeadas en Internet Explorer | border-radius con javascript, HTC o VML. Mientras esperamos CSS3 os dejo 24 técnicas más, alternativas y [...]
Comentario de Bonzu Pipinpadaloxicopolis III por Esquinas redondeadas en Internet Explorer | border-radius: Es c.. http://bit.ly/GbhL7
[...] Links: Esquinas redondeadas en Internet Explorer, border-radius generator Twittea este post |Comparte en Facebook | No hay comentarios [...]
Esquinas redondeadas en Internet Explorer | border-radius | ceslava – Diseño y Formación http://is.gd/c5XrK