:::: MENU ::::

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:

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


35 Comentarios

  • eveevans |

    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

  • Jhonattan Guillen |

    Que bueno tips este.. la verdad q es mucho mas facil que en vez de estar editando varias imagines para lograr este efecto..!

  • Tomas Roggero |

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

  • Ivan |

    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 |

    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 |

    Asi es…en Opera no funciona…porque es un navegador standard…nada de -firefox-gimme-some-border o cosas raras y especificas :p

  • Susana |

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

  • jesus |

    que tal,
    no me funciona para div´s queestan dentro de un div, es decir del div wrapper.. como hago??

  • Luis |

    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

  • Gabriel Rojo |

    Hola oye yo lo trato de jalar desde un archivo .css y no me funciono para explorer cual puede ser el error

  • Diseño Web Jquery |

    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 |

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

  • Kol |

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

  • kosios |

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

  • Seba |

    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

  • Cartero |

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

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

Publica tu comentario

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;.