Como crear bordes redondeados utilizando solo CSS y sin imágenes

Si hay una propiedad que amo y que todavía no esta del todo implementada por todos los navegadores es border-radius una propiedad que trajo CSS3 y que nos permite en resumidas cuentas transformar bordes rectangulares en bordes redondeados, sin utilizar absolutamente ninguna imagen.

¿Qué tal es la compatibilidad con los distintos navegadores?

Esta propiedad de CSS3 todavía no esta soportada en su totalidad por todos los navegadores, así que se imaginaran que con la border-radius pasa exactamente lo mismo y no se equivocan.  La propiedad esta soportada por Firefox 3.0 o superiores, Chrome desde la primera versión y Safari desde la versión 3.1.  Y todavía no es compatible con Internet Explorer ni Opera, aunque probablemente en Opera sea compatible a partir de la nueva versión.

Como todavía CSS3 no esta implementado completamente el nombre de la propiedad puede variar un poco, por ejemplo para Chrome o Safari utilizaremos -webkit-border-radius mientras que para Firefox -moz-border-radius.

En lo particular que la propiedad no este soportada por IE/Opera me sigue molestando bastante, no obstante, yo la utilizo igual, llegado el caso las personas que usen Internet Explorer/Opera no verán bordes redondeados, ellos verán esquinas cuadradas y listo. No es algo grave ni nada, y sinceramente no creo que amerite la colocación de un script ni de un hack. Haciendo esto ultimo solo cambiaríamos un problema por otro, ya que en lugar de utilizar imágenes estaríamos recargando todo con js o distintas técnicas molestas.

Empecemos. El espacio de trabajo

Para hacer todas estas pruebas lo primero que voy a crear es una simple DIV con un tamaño predeterminado y con un color de fondo. El resultado seria una caja común y corriente con las esquinas cuadradas.

Primero el HTML

PLAIN TEXT
HTML:
  1. <div class="demo"></div>

Ahora el CSS

PLAIN TEXT
CSS:
  1. .demo {background: #009933; width:585 px; height: 110 px;}

El resultado:

DIV Inicial

Primeros pasos para aplicar bordes redondeados CSS

Comencemos con la declaración básica. Apliquemos un ángulo de 15px en todos los bordes, agregando el siguiente código para que Firefox lo interprete.

PLAIN TEXT
CSS:
  1. .demo {-moz-border-radius:15 px;}

Una vez aplicada la propiedad el resultado será el siguiente:

bordes redondeados css

Ahora vamos a detenerlos a explicar un poco como funciona esto, cuando solo colocamos un valor, el mismo se aplicara en todas las esquinas, no obstante podemos declarar cada valor de forma independiente y esto lo hacemos de la siguiente manera:

  • -moz-border-radius-topleft: Esquina superior izquierda.
  • -moz-border-radius-topright: Esquina superior derecha.
  • -moz-border-radius-bottomleft: Esquina inferior superior izquierda.
  • -moz-border-radius-bottomright: Esquina inferior superior derecha.

Así que en pocas palabras la versión resumida seria idéntica a:

resumen propiedad radius

Perfecto, pero ¿se pueden combinar las distintas esquinas?

La respuesta es…Si!!! Y es de lo más divertido combinar distintos tamaño o bien dejar alguna esquina cuadra mientras que las otras son redondeadas. Además que quedan perfectas el efecto visual es muy bueno. Vamos con ejemplos.

PLAIN TEXT
CSS:
  1. .demo {-moz-border-radius:15px 55px;}

Al declarar solo dos dimensiones las mismas se aplicaran de la siguiente manera:

  • -moz-border-radius:15px 55px => 15px Esquina Sup IZQ y Esquina Inf DER
  • -moz-border-radius:15px 55px=> 55px Esquina Sup. DER y Esquina Inf. IZQ

Y el resultado es:

dos esquinas redondeadas

También se pueden declarar solo tres valores. Pero no tiene sentido explicarlo, la mitología es la misma y escribiendo un línea de CSS pueden probarla ustedes mismos :D

¿Y que pasa con los otros navegadores?

Hasta hora probamos todo solamente utilizando Firefox, la razón es simple, es mas didáctico hacerlo así, ahora para Safari y Chrome la forma de lograr los mismos resultados es exactamente idéntico, con la única diferencia que utilizaremos -webkit-border-radius en lugar de -moz-border-radius.

  • -webkit-border-top-left-radius: Esquina superior izquierda.
  • -webkit-border-top-right-radius: Esquina superior derecha.
  • -webkit-border-bottom-left-radius: Esquina inferior superior izquierda.
  • -webkit-border-bottom-right-radius: Esquina inferior superior derecha.

Exactamente funciona igual que en los ejemplos que vimos anteriormente.

Combinando todo para lograr bordes redondeados

Ahora solo resta combinar estas propiedades para lograr la mayor compatibilidad entre los navegadores, quedando de la siguiente manera un borde redondeado compatible con Firefox, Chrome, Safari:

PLAIN TEXT
CSS:
  1. .demo {
  2. -moz-border-radius:15px 55px 5px;
  3. -webkit-border-radius: 15px 55px 5px;
  4. }

Esto es todo, ya con esto deberíamos lograr nuestros preciados bordes redondeados, livianos, sin recargar con imágenes a nuestros visitantes. Ojala algún día el resto de los navegadores recuerden que existen estándares y los apliquen.

Tags:

Escrito por Pablo

Programador con más de 10 años de experiencia, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

El Lunes, Septiembre 14th, 2009 a las 4:00 y fue guardada bajo Programación.

Compartir esta entrada

Entradas relacionadas

15 Comentarios en “Como crear bordes redondeados utilizando solo CSS y sin imágenes”

  1. TecnoBITA Dice:
    Septiembre 14th, 2009 a las 9:08

    Es muy agradable el acabado visual que dan los bordes redondeados en los sitios web, sin duda alguna que estas técnicas son muy útiles.

    Curioso que no conocía lo de combinar las esquinas, muy bueno :)

  2. ejosvp Dice:
    Septiembre 14th, 2009 a las 11:29

    sencillo, y funcional, los de opera que pena =P, los de IE me caen mal xD

  3. Pablo Dice:
    Septiembre 14th, 2009 a las 13:06

    @Tecnobita: Erick, yo lo descubri hace un tiempo y queda genial! :D

    @Ejosvp: Si la verdad que los usuarios de IE se lo pierden :P

  4. Analton Dice:
    Septiembre 14th, 2009 a las 21:08

    Muy bueno el post Pablo.
    Una sola cosa para resaltar CSS3 todavía no es estándar. Esta en desarrollo, lo cual quiere decir que quizás mañana la propiedad border-radius no exista.
    Y por eso tambien la implementacion de Gekko y de Webkit (los motores de Firefox, Chrome y Safari) es distinta.
    En la pagina del W3c encontre algunos ejemplos de cosas bastante copadas que se pueden hacer con esta propiedad (esto no significa que los navegadores ya lo implementen de esa forma)
    Les dejo el enlace:
    http://www.w3.org/TR/css3-background/#the-border-radius

  5. Pablo Dice:
    Septiembre 14th, 2009 a las 22:46

    @Analton: Buen apunte, sabes que tenes razón, no se porque carajo estaba seguro de que ya estaba estandarizado, debe ser por la cantidad de tiempo que hace que lo estan laburando. Gracias por la data!

  6. Praboy Dice:
    Septiembre 15th, 2009 a las 11:52

    uy uy uyy, justo estaba pensando el diseño para un nuevo proyecto…
    Esas esquinas combinadas me abrieron la mente :P

  7. Pablo Dice:
    Septiembre 15th, 2009 a las 12:24

    @Praboy: jejejej, genial, me alegro mucho que te sirvan!!! :D

  8. Neri Dice:
    Septiembre 15th, 2009 a las 17:41

    El otro día lo leí y lo dejé marcado, ahora ando con un menú en un header y me acordé del efecto y lo puse a práctica, se ve muy bueno, asi que gracias :D

  9. Praboy Dice:
    Septiembre 17th, 2009 a las 23:57

    mm hay un problema !!
    Miren como se ve en chrome:
    http://img33.imageshack.us/img33/5548/chvsff.jpg

  10. Como hacer un globo de historieta solo con CSS | Kabytes Dice:
    Octubre 21st, 2009 a las 11:59

    [...] del div que es el globo propiamente, el mismo se hace usando como base la propiedades CSS para crear bordes redondeados, que ya vimos en otro tutorial. Por lo que el código seria el siguiente: PLAIN TEXT [...]

  11. Javier Dice:
    Noviembre 22nd, 2009 a las 19:03

    Lo estuve probando con Firefox y con Midori quedan perfecto, con Konqueror quedan cuadrados, que lástima que no es estandar.

  12. fotos locas Dice:
    Diciembre 16th, 2009 a las 18:00

    gracias funciona perfecto en firefox

  13. ximena Dice:
    Febrero 23rd, 2010 a las 19:47

    no me sirve para IE, lo necesito, porfavor si me pueden dar respuesta.
    Grcias:)

  14. Herramienta para crear bordes redondeados CSS | Kabytes Dice:
    Marzo 2nd, 2010 a las 8:34

    [...] de las cosas que mas me gusta de CSS 3 es la facilidad con las que uno puede crear bordes redondeados sin utilizar imágenes, algo que se viene pidiendo desde hace mucho tiempo y que desde hace poco tiempo es [...]

  15. Utilizar unicode en CSS | Kabytes Dice:
    Marzo 8th, 2010 a las 9:39

    [...] de agradecer que con CSS3 se pueden hacer cajas con bordes redondeados sin tanto embrollo, la propuesta de la misma estructura pero mostrando las clases con unicode seria [...]

Deja tu comentario

Seguir comentarios por RSS