La implementación de bordes redondeados en HTML normalmente se hacer utilizando imágenes de fondo o con otras técnicas que por lo general son engorrosas, esta vez les presentamos una técnica muy sencilla con la que podemos crear elementos con esquinas redondeadas de manera sencilla.
Como lo hacemos
Para crear bordes redondeados con CSS en Firefox, podemos utilizar la propiedad -moz-border-radius y si utilizamos Safari se puede utilizar la propiedad -webkit-border-radius, pero para Internet Explorer no hay posibilidad de hacerlo nativamente.
Entonces para ello haremos uso de un hack que fue publicado en Curved corner (border-radius) cross browser, este hack se ha preparado en un archivo border-radius.htc. Entonces luego de descargar el archivo, para aplicar los bordes redondeados creamos un estilo de la forma:
.curved {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
}
Luego podemos aplicar este estilo a cualquier div que nosotros deseamos, como se muestra a continuación:
<div id="alert" class="curved">Curved Corner</div>
Con esto logramos obtener las esquinas redondeadas que se verán correctamente en todos los navegadores y con unas pocas líneas.
Observaciones
He probado este hack y por defecto le pone un borde al div que elegimos, para eliminar este efecto es necesario agregar un borde con el mismo color de fondo del elemento. Además de ello por defecto hace que el div al que se aplica los bordes redondeados se muestre centrado, para evitar ello agregamos un par de líneas a nuestro CSS (float y clear).
#alert {
width: 250px;
background-color: #A0C7F1;
border: #A0C7F1 solid 1px;
clear: both;
float: left;
}
El código anterior crea un elemento de de 250 pixels de ancho con color de fondo y borde iguales. Este ejemplo lo podemos ver funcionando en Esquinas Redondeadas.
Comentarios Total 36 comentarios
Publicado: 22/10/2008 11:07 am
Esta bastante interesante , pero
no me funciona en el IE,, me da el siguiente error
Line: 0
Character: 0
Code: 0
Error Message: Access is denied to: file:///C:/Users/user/Desktop/ppppp/border-radius.htc
URL: file:///C:/Users/user/Desktop/ppppp/prueba.html
Publicado: 22/10/2008 11:13 am
bueno quien sabe que era>>
ya funciona perfectamente,,
excelente gracias
Publicado: 22/10/2008 12:45 pm
Que bueno tips este.. la verdad q es mucho mas facil que en vez de estar editando varias imagines para lograr este efecto..!
Publicado: 22/10/2008 3:40 pm
Hi,
this hack work properly only DIV…
For example I have:
<ol%gt;
<li class=»curved»%gt;…</li%gt;
…
</ol%gt;
In this case doesn’t work properly :(
Publicado: 23/10/2008 1:30 pm
No sé por qué pero en IE no me funciona (estoy aplicando divs, y en tu ejemplo si funciona y tengo exactamente el mismo código).
Publicado: 23/10/2008 1:42 pm
en opera no se ven las esquinas redondas O.o
Publicado: 23/10/2008 9:03 pm
[…] Bordes Redondeados con CSS » unijimpe Lindo hack para bordes redondeados, compatible con IE6 (tags: hack howto css rounded roundedcorners) […]
Publicado: 25/10/2008 6:26 pm
Mas de lo mismo, en IE no me funciona pero vamos, tampoco me importa xD que se pasen a Firefox si quieren ver la web mas bonita, jaja
Publicado: 27/10/2008 4:48 pm
es un exelente truco pero con IE hasta el 6 para mi es un dolor de cabeza usare siempre fire fox gracias por el aporte
Publicado: 06/11/2008 7:08 pm
Asi es…en Opera no funciona…porque es un navegador standard…nada de -firefox-gimme-some-border o cosas raras y especificas :p
Publicado: 07/11/2008 7:36 pm
Gracias por el aporte, lo probé tanto en Firefox como en IE6 y funciona. En Opera desgraciadamente no.
Veo en los comentarios que hay problemas con el IE6, creo que el problema puede ser una cuestión de ruta. Para probar se podría colocar todos los archivos dentro de una misma carpeta (con el código tal cual al que está arriba) y no debería haber problema. Por otro lado, si tienen el css dentro de una carpeta (por ejemplo llamada CSS)y el archivo que contiene el div con los bordes redondeados se encuentra al mismo nivel que la carpeta, al código habría que agregarle lo sgte.: behavior:url(css/border-radius.htc);
Espero sea de ayuda :-)
Publicado: 17/11/2008 6:15 am
[…] unijumpe.net – Bordes redondeados con CSS […]
Publicado: 25/11/2008 2:10 pm
que tal,
no me funciona para div´s queestan dentro de un div, es decir del div wrapper.. como hago??
Publicado: 15/12/2008 5:51 am
[…] Bordes Redondeados con CSS […]
Publicado: 15/12/2008 2:12 pm
Lo he probado con divs estáticos y trabaja bien, pero cuando le cambias el tamaño al div haciendo uso del DOM, no trabaja bien
Publicado: 09/01/2009 11:52 pm
[…] no es necesario mucho código para llevarlo a cabo, y en el mismo sitio se puede bajar el fichero. (Acá la misma forma, pero con una pequeña modificación y en […]
Publicado: 03/06/2009 12:21 pm
Joder, y yo matandome con imagenes de fondo xDDD
Muchas gracias :P
Publicado: 04/06/2009 12:13 pm
Oye veo que en opera y I Exploter no funciona… es normal? con firefox y chrome me va perfecto
Publicado: 23/07/2009 1:06 am
Hola oye yo lo trato de jalar desde un archivo .css y no me funciono para explorer cual puede ser el error
Publicado: 20/08/2009 1:25 pm
[…] Bordes Redondeados con CSS […]
Publicado: 20/11/2009 10:14 pm
Hola tengo el mismo problema, tengo un html y en otra carpeta esta el css, y en el mismo nivel que el html esta el htc lo vinculo asi behavior:url(css/border-radius.htc); pero no me da, tambien lo hice asi behavior:url(border-radius.htc); y asi behavior:url(../css/border-radius.htc); pero nada
Publicado: 05/04/2010 6:10 pm
funciona muy bien, yo manejo mucho jQuery y al momento de usuar ajax estye archivo me genera un error.. creo que me qedaré con los cuadros :(..
Publicado: 03/06/2010 11:56 am
Nuevamente gracias compadre..
Publicado: 05/06/2010 1:50 pm
behavior: url(ie-css3.htc) para usar CSS3 en IE de forma nativa,
Publicado: 22/06/2010 11:08 am
No entiendo q archivo voy a descargar, hablas de descargar un archivo pero no lo encuentro.
Publicado: 22/06/2010 11:17 am
Ya tengo el archivo HTC donde agrego este archivo???
Publicado: 02/09/2010 10:59 am
no funciona con IE8 con firefox todo bien
Publicado: 28/12/2010 2:55 pm
lo he probado en DIV pero no funciona en IE8
Publicado: 24/02/2011 11:34 pm
este tipo de codigo que facilita mucho la carga ya q no utiliza imagenes y es rapido y practico deveria ser incluido en todos los navegadores con un mismo codigo
Publicado: 05/04/2011 4:56 pm
Hola a todos,
Esta propiedad (border-radius.htc) puede ser usado con el tag ?
Saludos.
Publicado: 06/04/2011 5:58 am
no funciona con IE8!!
Publicado: 10/11/2011 8:56 am
Me funcionó de maravilla! Se agradece el aporte!!!!!!!! Qué significa la extensión .htc?
Gracias!!!!!!!!!!!!!!!!!!!!
Publicado: 10/11/2011 9:26 am
Paren de ser esclavos del Explorer que es una mierda!
Publicado: 12/01/2012 5:48 pm
Te dejo una recopilación con 16 creadores online de bordes redondeados y demás propiedades css. Espero que te parezca interesante.
http://www.opcionweb.com/index.php/2012/01/12/creadores-de-bordes-redondeados-css-online/
Un saludo.
Publicado: 21/11/2012 2:31 am
No me funciona con el ie, aunque con esas queda dabuty
Publicado: 31/05/2021 5:22 pm
gracias por todo el contenido que ofrece la pagina mediante sus comentarios e informacion me fue de gran ayuda para unos trabajos, gracias por todo