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:


-moz-border-radius: valor;

-webkit-border-radius: valor;

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:


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

}

Código HTML:


<div id="ppal">texto de ejemplo </div>

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:


behavior:url(border.htc);

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:


border-radius: 15px 15px 15px 15px;

El codigo final CSS para todos los navegadores, en este caso quedaría asi:


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

}

Como se puede apreciar, un recurso de gran utilidad.

Saludos!!

Cristian – Programador Web

Sucribete y recibe los nuevos articulos que publique:

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

  1. jesus

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

    Responder
  2. jesus

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

    Responder
    1. psd a html paso a paso Autor

      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

      Responder
  3. german lozano

    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…

    Responder
  4. Arturo

    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?

    Responder
    1. psd a html paso a paso Autor

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

      Responder
  5. rpd

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

    Responder
    1. Cristian (PSD a HTML) Autor

      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

      Responder
  6. Laura

    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!

    Responder
  7. Laura

    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!

    Responder
  8. Marisa

    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?

    Responder
  9. Brenda

    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.

    Responder
  10. Franciscoctss

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

    Responder

Deja un comentario

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


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>