El CSS3 y las curvas

El CSS (Cascading Style Sheets) es un lenguaje o pseudo-lenguaje que nos permite darle propiedades a las distintas etiquetas de un documento HTML o XML, y de esa manera, controla la forma en que se verá, se imprimirá o se escuchará.

Desde que comenzó a usarse con cierta regularidad (no hace demasiado tiempo), ha ido sufriendo modificaciones, se han agregado definiciones y, en este momento, el que se utiliza es el llamado CSS level 2 [CSS2] sin embargo, ya se está trabajando con el que será la próxima etapa, el CSS3 que incluirá algunas novedades tales como bordes, sombras, etc (más información).

Pese a ser algo "para el futuro", ya hay navegadores que soportan algunas de estas características: Firefox, Opera, Safari/Webkit y Konqueror. Lamentablemente, no pasa lo mismo con Internet Explroer y aunque esa limitación es una molestia, no veo razones para no experimentar con el tema y utilizar esas propiedades. De hecho, son muchos los sitios que ya las usan.

De todas ellas, la más interesante y además, la más sencilla es border-radius que es una propiedad que nos permitirá redondear las esquinas de cualquier elemento.

Tiene las mismas caracterísiticas que la propiedad border, puede usarse de manera genérica estableciendo los cuatro bordes al mismo tiempo, establecer las propiedades de cada uno de ellos y además las características de cada definción (tamaño, ancho, color).

La sintaxis es la siguiente:

border-radius: valorpx;

Sin embargo, lo mejor es utilizar todas las definiciones ya que los navegadores, por ahora, utilizan algunas variantes:

-moz-border-radius: valorpx;
-khtml-border-radius: valorpx;
-webkit-border-radius: valorpx;
border-radius: valorpx;

No estoy seguro si existe la posibilidad de establecer las propiedades individuales en todos los navegadores y estas son algunas de las que he encontrado:

el borde inferior izquierdo:
-moz-border-radius-bottomleft: valorpx;
-webkit-border-bottom-left-radius: valorpx;

el borde inferior derecho:
-moz-border-radius-bottomright: valorpx;
-webkit-border-bottom-right-radius: valorpx;

el borde superior izquierdo:
-moz-border-radius-topleft: valorpx;
-webkit-border-top-left-radius: valorpx;

el borde superior derecho:
-moz-border-radius-topright: valorpx;
-webkit-border-top-right-radius: valorpx;

Para no complicarme la vida, de acá en más me voy a limitar a poner las propiedades utilizadas por Firefox.

Usar esto es muy sencillo. Veamos un ejemplo concreto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<style>
.ejemplo1 {
background-color: #3465AD;
border:2px solid CornflowerBlue;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
</style>

<div class="ejemplo1">Lorem ipsum dolor sit amet, consectetuer ...</div>

En ese ejmplo, los cuatro bordes estan redondeados con el mismo radio pero, pueden ser diferentes usando algo así:

-moz-border-radius: valorpx valorpx valorpx valorpx;

que corresponden a los bordes superior, derecho, inferior e izquierdo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<style>
.ejemplo2 {
background-color: #3465AD;
border: 2px solid CornflowerBlue;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 10px 30px;
-khtml-border-radius: 10px 30px;
-webkit-border-radius: 10px 30px;
border-radius: 10px 30px;
}
</style>

<div class="ejemplo2">Lorem ipsum dolor sit amet, consectetuer ...</div>

El borde curvo puede hacer tanto si el elemento tiene borde como si no lo tiene. Por ejemplo, podríamos eliminar border:2px solid CornflowerBlue; y el resultado sería este:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Así como podemos establecer tamaños diferentes para cada borde, también podemos establecer el color de cada uno:

-moz-border-bottom-colors: elColor;
-moz-border-left-colors: elColor;
-moz-border-right-colors: lColor;
-moz-border-top-colors: elColor;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<style>
.ejemplo3 {
background-color: #3465AD;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 20px;
-moz-border-bottom-colors: LightSeaGreen;
-moz-border-left-colors: lightblue;
-moz-border-right-colors: #999999;
-moz-border-top-colors: CornflowerBlue;
}
</style>

<div class="ejemplo3">Lorem ipsum dolor sit amet, consectetuer ...</div>

Combinado todo eso, se pueden lograr cosas espectaculares:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<style>
.ejemplo4 {
background-color: #000000;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-top-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-left-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-right-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
padding: 5px 5px 5px 15px;
}
</style>

<div class="ejemplo4">Lorem ipsum dolor sit amet, consectetuer ...</div>

Una propiedad similar al borde y que se utiliza en Firefox es outline, una especie de borde extra ¡Y también puede "curvarse"!

-moz-outline: valorpx:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<style>
.ejemplo5 {
-moz-outline-radius: 40px;
outline-color: aliceBlue;
outline-offset: 5px;
outline-style: solid;
outline-width: 5px;
-moz-border-radius: 30px;
}
</style>

<div class="ejemplo5">Lorem ipsum dolor sit amet, consectetuer ...</div>

Si bien en Internet Explorer no está soportado, en HTML Remix ofrecen una solución cuyo demo puede descargarse en formato ZIP .

El problema es que requiere utilizar un archivo de extensión HTC (HTML Component) que es un formato de archivo muy difícil de alojar en algún servidor gratuito. De todas formas, lo usaríamos de esta forma:

<style>
.curvado {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  behavior: url(URL_border-radius.htc);
}
</style>

<div class="curvado">Lorem ipsum dolor sit amet, consectetuer ...</div>