Muchas veces en nuestros diseños, necesitamos utilizar placas de colores redondeadas (tipo globitos) donde contener información destacada. Entonces al pasar del PSD a HTML se suele colocar una imagen de fondo, pero la misma no es versátil ya que por un lado ocupa más kilobytes, y por otro lado si luego tenemos que agrandarla porque necesitamos incluir más información, debemos realizar todo el proceso de exportado de nuevo…
En este artículo te enseñaré como crear bordes redondeados CSS sin utilizar ningún tipo de imagen.
Con la llegada de la version 3 de CSS, han aparecido nuevas e interesantes propiedades para manipular elementos. Una de ellas, es una propiedad que nos permite redondear los bordes de algunos elementos de nuestro HTML.
Entonces, para lograr una placa con bordes redondeados, solamente debemos crear un DIV con la medida que deseemos, y aplicar 2 propiedades para redondear sus bordes a nuestro gusto.
Estas propiedades son:
[sourcecode=»css»]
-moz-border-radius: valor;
-webkit-border-radius: valor;
[/sourcecode]
La primera «-moz-border-radius» se utiliza para el navegador Firefox, y la segunda «-webkit-border-radius» para los navegadores Safari y Chrome.
Los valores que aceptan esta propiedades son los pixeles de radio de la curva de cada uno de los 4 ángulos.
Y se escriben en el siguiente orden:
arriba-izq, arriba-der, abajo-der, abajo-izq
Entonces si por ejemplo, quisiéramos dar 15px de radio a cada ángulo, el código CSS sería el siguiente:
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
Mostraré aquí un ejemplo completo con un DIV de fondo rojo, de tamaño 200 x 200px, y con bordes redondeados de 15 px cada uno.
Código CSS:
[sourcecode=»css»]
#ppal {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
}
[/sourcecode]
Código HTML:
[sourcecode=»html»]
[/sourcecode]
Resultado:
Además de un color de fondo, tambien puedes poner una imagen de fondo, y la misma quedará enmascarada dentro de los bordes redondeados !!!
Implementación en Internet Explorer
Para nuestro «amigo» Internet Explorer» debemos utilizar algo mas complejo.
La solución incluye algo de JavaScript.
Debes descargarte el archivo border.htc, que esta comprimido en un ZIP en el siguiente enlace:
> Descargar archivo border.htc <
Lo descomprimes en el mismo directorio donde tienes los archivos HTML que estás utiizando.
Luego, a la clase CSS debes agregarle la siguiente linea:
[sourcecode=»css»]
behavior:url(border.htc);
[/sourcecode]
Y listo!!
Funciona en Internet Explorer.
ULTIMA ACTUALIZACION: Funcionalidad para Opera
Gracias a nuestro usuario rod750, tenemos la implementación para el navegador Opera.
Solo tienes que agregar al CSS, la siguiente propiedad:
[sourcecode=»css»]
border-radius: 15px 15px 15px 15px;
[/sourcecode]
El codigo final CSS para todos los navegadores, en este caso quedaría asi:
[sourcecode=»css»]
#ppal {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/*para IE */
behavior:url(border.htc);
/* para Opera */
border-radius: 15px 15px 15px 15px;
}
[/sourcecode]
Como se puede apreciar, un recurso de gran utilidad.
Saludos!!
Cristian – Programador Web
exelente aporte cristian dunciona muy bien y ademas se nota un cambio muy elegante.
Una duda, que pasa con IExplorer8 y 9, no funciona el estilo con este navegador???
Gracias Jesus
Si, en IE no funciona lamentablemente.
saludos!
Cristian
lastima, porque la mayoria de los usuarios usa este navegador, pues solo los ususarios con diferente navegador podran apreciar el cambio, gracias
usa algun plugin como jquery corner, pa todo exploradores hasta IE 5 +
Si eso tambien podria funcionar.
Pero la idea es hacerlo todo con CSS sin insertar librerias o frameworks que no sean de ese lenguaje.
saludos!
Cristian
Muy bueno por seguir enseñándonos cosas útiles
Por nada Oviedo.
Saludos!
muy bueno esto del html, por ahora no se nada de nada ,
pero como voy leyendo , esto esta genial ,
pronto tendre que pedirte esos 5 pasos cristian…
Muy bueno y muy útil Cristian.
Lo probé y con Firefox, Safari y Chrome funciona perfecto.
Pero ni con Opera 11.52, ni con IE 8 me funcionó.
De IE ya ni me extraña, yo casi nunca lo uso, pero desgraciadamente en mi país el 60% de la gente lo sigue usando.
¿Que se puede hacer?
Alli lo tienes Arturo.
Acabo de actualizar el post con la implementacion de bordes redondeados en Internet Explorer.
🙂
Saludos!
Cristian
Eso es porque Opera soporta la propiedad CSS oficial: border-radius.
Gracias por tu aporte Rod.
Acabo de actualizar el post.
Saludos!
Cristian
Buenas! realmente me sirvió el truco para explorer, aunque me gustaría aclarar una cosa, el color de fondo/imagen de fondo no lo redondea, solamente redondea el borde. como un señor (ole sus huevos), hay alguna forma de solucionar esto?
*añadir de paso que para el konqueror es con -khtml-border-radius:blablabbla;
saludos 🙂
Hola Rpd
No comprendo lo que planteas.
Como que no redondea el color de fondo??
Justamente en este ejemplo, el color de fondo del DIV es rojo y puedes ver que si redondea las esquinas.
Saludos!
Cristian
Hola! Estuve leyendo los posteos, yo tengo un DIV que tiene una imagen de fondo, probe todas las formas posibles para redondear los bordes pero no me funciona ni en IE7/8/9, en ninguno de los 3. Eso es acaso porque tengo la imagen de fondo? Digamos, quisiera saber si el truco funciona solamente para un DIV sin imagen!
Gracias!
Correción, si me funciona en IE9, pero no asi en los IE anteriores … la verdad no se que puede ser si a ustedes les funciona, como dije arriba, lo que cambia es que yo tengo una imagen de fondo en mi DIV .. si alguien puede darme una mano, les agradeceria muchisimo!
Muy bueno! Soy diseñador Web y me viene muy bien!
He probado lo del archivo border-radius.htc, pero no hay caso, a IE no se le mueve un pelo! Les ha funcionado? que estaré haciendo mal?
super buen aporte y fácil de implementar!!
Funciona a la perfecccion en Explorer 9. Muchas gracias
super, me encanta como funcionan las cosas gracias
Hola! Estoy arrancando con esto de web (soy del diseño gráfico) y la verdad que estos aportes, son de ayuda más que valiosa. Gracias por tomarte el tiempo y ayudar con estos trucos que son geniales.
Por nada Brenda, me alegra que te haya servido.
Saludos!
Cristian
Gracias me funciono de 10!
🙂
Muchas gracias, de no ser por este tutorial no hubiera solucionado mi error, yo lo tenía con el «-moz-» y lo estaba probando en Chrome, jajaja, y me sirvió en mi proyecto. 🙂
Me alegro mucho que te haya servido, Francisco!
Saludos
Cristian
Muy buen articulo, me ayudó bastante. Gracias.
Ahora, una pregunta, quiero poner color a este borde redondeado, pero con la propiedad «border-color:____» no acepta el cambio,Mi pregunta sería: cómo puedo hacer esto?, por favor si me puedes ayudar.