El actual estándar CSS 2.1 obliga a que todos los bordes de los elementos sean rectangulares. Esta limitación es una de las más criticadas por los diseñadores, ya que les impide crear bordes curvos o redondeados que se adapten mejor a sus diseños.
La futura versión CSS 3 incluye varias propiedades para definir bordes redondeados. La propiedad border-radius establece la misma curvatura en todas las esquinas y también se definen las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada esquina.
En cada propiedad se debe indicar obligatoriamente una medida y se puede indicar opcionalmente una segunda medida. Cuando se indica una sola medida, la esquina es circular y su radio es igual a la medida indicada. Cuando se indican dos medidas, la esquina es elíptica, siendo la primera medida el radio horizontal de la elipse y la segunda medida su radio vertical.
Aunque faltan muchos años hasta que se publique la versión definitiva de CSS 3, los navegadores que más se preocupan de los estándares ya incluyen soporte para crear esquinas redondeadas. El siguiente ejemplo muestra cómo crear esquinas redondeadas con los navegadores Safari y Firefox:
div {
-webkit-border-radius: 5px 10px; /* Safari */
-moz-border-radius: 5px 10px; /* Firefox */
}La solución basada en CSS 3 es la más sencilla y la mejor técnicamente, pero hasta que todos los navegadores no incluyan soporte para CSS 3, no es posible utilizar esta técnica para crear esquinas redondeadas.
Afortunadamente, las esquinas redondeadas son uno de los recursos más solicitados por los diseñadores web y por eso se han definido decenas de técnicas para mostrarlas. Las técnicas se clasifican en: * Soluciones basadas en CSS y que no utilizan imágenes. * Soluciones basadas en CSS y que utilizan imágenes. * Soluciones basadas en JavaScript.
Las soluciones basadas exclusivamente en CSS y que no utilizan imágenes combinan HTML y CSS para engañar al ojo del usuario y hacerle creer que la esquina es redondeada.
El truco consiste en añadir varios elementos cuya longitud disminuye progresivamente para crear un perfil curvo. La siguiente imagen muestra el resultado final de esta técnica (izquierda), el número de elementos necesarios para conseguirlo (centro) y un detalle ampliado de una esquina (derecha):
Figura 1.7 Esquinas redondeadas creadas con CSS y sin imágenes (resultado final y detalle de cómo se consigue)
A continuación se muestra el código HTML y CSS necesarios para crear esquinas redondeadas con CSS y sin imágenes:
<div id="contenedor">
<b class="esquinas_superiores">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<!-- Aquí se incluyen los contenidos -->
<b class="esquinas_inferiores">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>.esquinas_superiores, .esquinas_inferiores {
display: block;
}
.esquinas_superiores *, .esquinas_inferiores * {
display: block;
height: 1px;
overflow: hidden;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }Para crear una esquina redondeada con esta técnica es necesario incluir muchos elementos HTML adicionales. Por ese motivo se utiliza la etiqueta <b>, que hace que el código HTML siga siendo válido y su nombre sólo tiene una letra, por lo que aumenta lo mínimo posible el tamaño del código HTML.
Las reglas CSS anteriores hacen que los elementos <b> tengan sólo 1px de altura y que cada vez se hagan más cortos, ya que aumentan sus márgenes laterales de forma progresiva. Modificando ligeramente los margin de cada elemento se pueden crear esquinas con más o menos radio de cuvatura. Además, también se pueden crear curvas sólo en una de las esquinas.
El principal problema de esta técnica es que no es sencillo cambiar la forma de la esquina redondeada y que la curva es tan escalonada que los usuarios pueden apreciarlo.
La solución al segundo problema consiste en crear curvas que utilicen la técnica del anti-aliasing para suavizar sus bordes. Esta técnica no es sencilla, ya que se debe tener en cuenta el radio de curvatura, el color de la curva y el color de fondo del elemento contenedor.
Algunas aplicaciones web generan automáticamente el código HTML y CSS necesarios a partir de los colores y el radio de curvatura deseado. A continuación se muestra el código HTML y CSS generados por la técnica Spiffy Corners:
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- Aquí se incluyen los contenidos -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.spiffy4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.spiffy5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.spiffyfg{
background:#000000}RoundedCornr es otra aplicación web que permite generar automáticamente el código HTML y CSS necesarios para crear esquinas redondeadas avanzadas.
Además de las esquinas redondeadas sencillas, muchos diseñadores quieren utilizar en sus trabajos esquinas complejas creadas a partir de imágenes. Una vez más, la futura versión CSS 3 incluirá una propiedad llamada border-image para utilizar cualquier imagen como borde de un elemento.
Hasta que los navegadores no soporten CSS 3, la solución consiste en aplicar las imágenes mediante CSS y algunos elementos HTML especialmente preparados.
Esta técnica requiere en primer lugar crear las imágenes de cada una de las cuatro esquinas del elemento. Una vez creadas las imágenes, se añaden elementos en el código HTML. Utilizando CSS, se muestran las esquinas redondeadas como imágenes de fondo de esos elementos HTML.
Los elementos HTML que se añaden pueden variar de una solución a otra, pero en general se añaden elementos <b> porque es una etiqueta de una sola letra:
<div id="contenedor">
<b class="superior">
<b></b>
</b>
<!-- Aquí se incluyen los contenidos -->
<b class="inferior">
<b></b>
</b>
</div>Con el código HTML anterior, las reglas CSS necesarias para mostrar las imágenes de cada esquina son muy sencillas:
b.superior { background:url("imagenes/esquina_superior_izquierda.png") no-repeat; }
b.superior b { background:url("imagenes/esquina_superior_derecha.png") no-repeat; }
b.inferior { background:url("imagenes/esquina_inferior_izquierda.png") no-repeat; }
b.inferior b { background:url("imagenes/esquina_inferior_derecha.png") no-repeat; }Por último, cuando las esquinas redondeadas no utilizan imágenes, es más conveniente utilizar soluciones basadas en JavaScript. La principal ventaja de esta técnica es que no es necesario ensuciar de forma permanente el código HTML con decenas de elementos de tipo <div> o <b>. Cuando el usuario carga la página, el código JavaScript crea en ese momento todos los elementos necesarios y los añade de forma dinámica al código HTML de la página.
Además, la otra gran ventaja de las soluciones basadas en JavaScript es que añaden decenas de elementos para crear bordes redondeados tan perfectos que son indistinguibles de los que se pueden crear con imágenes.
Algunas de las soluciones basadas en JavaScript más conocidas son jQuery Corner, jQuery Curvy Corners, jQuery Corners y Nifty Corners Cube.
El artículo CSS Rounded Corners Roundup compara decenas de técnicas para crear esquinas redondeadas basadas en CSS y JavaScript.