Ya vimos como crear bordes redondeados en CSS una vez gracias a CSS Sprites, pero ahora lo haremos para que sea compatible con Internet Explorer, gracias a un archivo .htc.
Pasos para crearlo:
Debemos descargar el archivo .htc, este archivo deberemos incluirlo en la raíz de nuestro FTP (si lo queréis dejar como está por defecto).
Después, metemos este código en el documento donde queramos tener nuestros bordes redondeados (El código consta de una llamada al archivo .htc, y un div con un selector css para llamar al estilo .redondo.)
Código CSS
.redondo {
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
Ahora, para aplicar bordes redondeados en CSS, deberemos añadir a la clase anterior, esta línea:
behavior:url(border-radius.htc);
Código HTML
El código HTML es:
<div class="redondo">borde redondeado</div>
Listo, ya tendremos nuestros bordes redondeados compatible con Internet Explorer gracias al uso de CSS y un archivo .htc. A continuación se muestra un ejemplo del mismo.
Actualización
¿No funciona la técnica acabo de mostrar en este artículo? Echad un vistazo a las distintas técnicas para crear bordes redondeados, seguro que encontraréis la solución.
Vía | Anieto2k
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Por ahora hay 24 comentarios ¿Quieres opinar?
Para aplicar este efecto en WordPress??
@Ivan se aplican los mismos pasos, solo que la clase (CSS) será otra distinta.
Un saludo.
Hola,
Lo he probado en explorer8 y si lo aplicas a un link hecho bloque no va muy bien…
@Copito, el gato con botas tendrías que pasar el ejemplo para verlo mejor. Si deseas resolver el problema pregúntalo en el foro de CSSBlog.es: http://comunidad.cssblog.es
En enlace para ver el ejemplo no funciona no?
@Lidia el enlace ha sido arreglado.
Un saludo.
Ahora sí! Gracias!
Lo estoy probando y no funciona, de hecho el enlace que publicaron uds. tampoco
@Samael debe funcionar, así que revisa en que te has confundido. Si tienes dudas pregúntalo en el foro: http://comunidad.cssblog.es
Un saludo.
Gracias por responder Pedro, ya me fijé y funciona unicamente en Firefox, que lástima, ese navegador no me gusta, y no me va a gustar.-
a mi solo me funciona en firefox, en explorer no
no se si estoy haciendo algo mal.
Es verdad, en IE no funciona, incluso los ejemplos de esta página… menudo FAIL. Estaría bien que la gente probara las cosas antes de postearlas, he visto ejemplos similares en muchos sitios y tampoco funcionan.
el ejemplo de esta pagina no funciona en explorer, toodo en esta pagina se ve rectangular, FAIL!!!!
deben colocar en el head:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
para internet explorer 7 y 8. Esto soluciona el problema ya que automaticamente carga la pagina en modo vista de compatibilidad
el enlace para descargar el archivo a caducado, te agradeceria que lo vuelvas a subir por favor , un saludote desde mexico
@dhamasito: ya está arreglado. Un saludo.
[...] Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias técnicas (bordes redondeados, sombra en el texto, sombra en las cajas, etc) sin necesidad de usar un editor [...]
no funciona el IE6
[...] Bordes redondeados [...]
No me funciona en IE6, ni IE8 ¿sabes por qué? Lo haré con imágenes…
Lo he probado en Internet Explorer 8 y con mi CSS con DIVs observo anomalias puntuales como que me puede aparecer un border negro o que la imagen de fondo coje un efecto de degradado-transparente-blanco de arriba a abajo encajando mal la imagen de fondo entre la union de imangen anterior y siguiente, tengo la imagen de fondo en repetición, como si fuese un fondo muy grande, pero en realidad se repite
que tonto eres firefox el uno de los mejores navegadores si no es que el mejor que hay en la actualidad!!! por gente como tu no se puede avanzar!!
Bueno el aporte, pero tiene sus peros, como hay tantas versiones del dichoso explorer lo mas seguro es que el metodo aca expuesto no sea 100% efectivo. de hecho solo hay 2 metodos 100% comprobados.
usar
http://www.html.it/articoli/nifty/index.html
es css puro sin imagenes funciona en Toooodo. Revisen el link, pruebenlo en IE5 y superiores.
el otro metodo es usar imagenes en las esquinas, pero conociendo a explorer lo mas seguro es que si usan imagenes PNG con transparecia .. fallen.
Muy buena tecnica, me gusta tu blog. saludes =)