Bordes Redondeados con CSS

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:

css
  1. .curved {
  2.     -moz-border-radius: 10px;
  3.     -webkit-border-radius: 10px;
  4.     behavior:url(border-radius.htc);
  5. }

Luego podemos aplicar este estilo a cualquier div que nosotros deseamos, como se muestra a continuación:

HTML4
  1. <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).

css
  1. #alert {
  2.     width: 250px;
  3.     background-color: #A0C7F1;
  4.     border: #A0C7F1 solid 1px;
  5.     clear: both;
  6.     float: left;
  7. }

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 35 comentarios


eveevans
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

eveevans
Publicado: 22/10/2008 11:13 am

bueno quien sabe que era>>
ya funciona perfectamente,,
excelente gracias

Jhonattan Guillen
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..!

Giovambattista Fazioli
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 :(

Tomas Roggero
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).

Derleth
Publicado: 23/10/2008 1:42 pm

en opera no se ven las esquinas redondas O.o

links for 2008-10-23 en newdisco
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) [...]

Ivan
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

Randall Castillo
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

5n4K3
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

Susana
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 :-)

Dave Ruiz blog » Enlaces varios
Publicado: 17/11/2008 6:15 am

[...] unijumpe.net – Bordes redondeados con CSS [...]

jesus
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??

Luis
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

Redondeando (bordes) | keeGeek
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 [...]

Los videos famosos
Publicado: 03/06/2009 12:21 pm

Joder, y yo matandome con imagenes de fondo xDDD

Muchas gracias :P

Los videos famosos
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

Gabriel Rojo
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


[...] Bordes Redondeados con CSS [...]

Diseño Web Jquery
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

Erik alberto
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 :(..

César Cancino
Publicado: 03/06/2010 11:56 am

Nuevamente gracias compadre..

Kol
Publicado: 05/06/2010 1:50 pm

behavior: url(ie-css3.htc) para usar CSS3 en IE de forma nativa,

kosios
Publicado: 22/06/2010 11:08 am

No entiendo q archivo voy a descargar, hablas de descargar un archivo pero no lo encuentro.

kosios
Publicado: 22/06/2010 11:17 am

Ya tengo el archivo HTC donde agrego este archivo???

Laura
Publicado: 02/09/2010 10:59 am

no funciona con IE8 con firefox todo bien

psico2512
Publicado: 28/12/2010 2:55 pm

lo he probado en DIV pero no funciona en IE8

Seba
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

José Humberto Márquez
Publicado: 05/04/2011 4:56 pm

Hola a todos,

Esta propiedad (border-radius.htc) puede ser usado con el tag ?

Saludos.

Ana
Publicado: 06/04/2011 5:58 am

no funciona con IE8!!

Cartero
Publicado: 10/11/2011 8:56 am

Me funcionó de maravilla! Se agradece el aporte!!!!!!!! Qué significa la extensión .htc?

Gracias!!!!!!!!!!!!!!!!!!!!

Cartero
Publicado: 10/11/2011 9:26 am

Paren de ser esclavos del Explorer que es una mierda!

Pancho Opcionweb
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.

albañil
Publicado: 21/11/2012 2:31 am

No me funciona con el ie, aunque con esas queda dabuty

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)