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

[HTML]

[/HTML]

Ahora el CSS
[CSS].demo {background: #009933; width:585 px; height: 110 px;}[/CSS]

El resultado:

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.

[CSS].demo {-moz-border-radius:15 px;}[/CSS]

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

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:

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.

[CSS].demo {-moz-border-radius:15px 55px;}[/CSS]

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:

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 😀

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

[CSS]
.demo {
-moz-border-radius:15px 55px 5px;
-webkit-border-radius: 15px 55px 5px;
}
[/CSS]

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.