Bordes redondeados CSS: Sin imágenes (IE,Chrome, Firefox,Safari,Opera)

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»]

texto de ejemplo

[/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

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

28 thoughts on “Bordes redondeados CSS: Sin imágenes (IE,Chrome, Firefox,Safari,Opera)

  1. jesus Reply

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

    1. psd a html paso a paso Post author Reply

      Gracias Jesus
      Si, en IE no funciona lamentablemente.

      saludos!
      Cristian

  2. jesus Reply

    lastima, porque la mayoria de los usuarios usa este navegador, pues solo los ususarios con diferente navegador podran apreciar el cambio, gracias

    1. psd a html paso a paso Post author Reply

      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

  3. german lozano Reply

    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…

  4. Arturo Reply

    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?

    1. psd a html paso a paso Post author Reply

      Alli lo tienes Arturo.
      Acabo de actualizar el post con la implementacion de bordes redondeados en Internet Explorer.
      🙂
      Saludos!
      Cristian

  5. rpd Reply

    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 🙂

    1. Cristian (PSD a HTML) Post author Reply

      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

  6. Laura Reply

    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!

  7. Laura Reply

    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!

  8. Marisa Reply

    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?

  9. Brenda Reply

    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.

  10. Franciscoctss Reply

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

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      Me alegro mucho que te haya servido, Francisco!
      Saludos
      Cristian

  11. Ivan Reply

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.