Bordes Redondeados con CSS
- 22/10/2008
- 12:12 am
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.
Posts Relacionados
- AdSense con bordes redondos
- Esquinas Redondeadas HTML
- Google Talk Gadget
- CSS Reset
- Implementar Menu con CSS
Total de Comentarios: 18
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
bueno quien sabe que era>>
ya funciona perfectamente,,
excelente gracias
Que bueno tips este.. la verdad q es mucho mas facil que en vez de estar editando varias imagines para lograr este efecto..!
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 :(
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).
en opera no se ven las esquinas redondas O.o
[...] Bordes Redondeados con CSS » unijimpe Lindo hack para bordes redondeados, compatible con IE6 (tags: hack howto css rounded roundedcorners) [...]
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
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
Asi es…en Opera no funciona…porque es un navegador standard…nada de -firefox-gimme-some-border o cosas raras y especificas :p
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 :-)
[...] unijumpe.net – Bordes redondeados con CSS [...]
que tal,
no me funciona para div´s queestan dentro de un div, es decir del div wrapper.. como hago??
[...] Bordes Redondeados con CSS [...]
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
[...] 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 [...]
Joder, y yo matandome con imagenes de fondo xDDD
Muchas gracias :P
Oye veo que en opera y I Exploter no funciona… es normal? con firefox y chrome me va perfecto
