Supongo que os habréis fijado en las cajas con esquinas redondeadas que hay en este sitio, ¿verdad?.

¿Y si os dijera que están hechas sin una sola imagen?

Mirad, mirad:

O si no, esta otra:

¿Cómo se hace esto? Continúa leyendo…

Empecemos por lo básico

Antes de meternos en JavaScript y el DOM, mejor veamos cómo simular unas bonitas esquinas redondeadas usando DIVs.

Antes de nada, que sepáis que esta técnica no es mía. La leí en este sitio e hice mi script basándome en esa idea.

Imaginad que tenemos este bloque:

<div style="border: 1px solid silver">
  Esto es una caja.
</div>

Este sería el resultado:

¿Cómo redondear las esquinas? Contestemos a esta pregunta con otra: ¿Cómo se hace una esquina redondeada?

Pongamos el caso más básico: si quitamos un píxel de cada esquina, la caja ya empezará a tener aspecto redondeado.

Sí, es muy fácil de decir, ¿pero cómo se le quita un píxel a cada esquina de una caja? Ahí está el truco: no hay que quitar, sino poner. Echemos un vistazo al ejemplo y hagamos algunos cambios: primero quitaremos el borde superior del bloque, y le agregaremos una capa de un píxel de alto justo encima:

<div style="font-size: 1px;
    height: 1px; background: silver;
    margin: 0px 1px"></div>
<div style="border: 1px solid silver; border-top: 0px none">
  Esto es una caja.
</div>

El efecto se vé mejor en la parte derecha. Ese font-size: 1px que hay en el estilo de la nueva capa es para evitar un bug de Internet Explorer, como siempre el navegador más problemático con diferencia.

Sigamos con el ejemplo: ¿cómo podríamos redondear más esas esquinas?. La respuesta es evidente: quitando más píxeles. Y ya sabemos cómo hacerlo:

<div style="font-size: 1px;
    height: 1px; background: silver;
    margin: 0px 2px"></div>
<div style="font-size: 1px;
    height: 1px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 1px"></div>
<div style="border: 1px solid silver; border-top: 0px none">
  Esto es una caja.
</div>

La cantidad de estilos y etiquetas que necesitamos escribir llegados a este punto empieza a ser preocupante, pero cuando lleguemos a la solución basada en JavaScript veremos que todo se simplifica bastante.

Podéis ver cómo ahora las esquinas están más redondeadas que antes. Vamos a avanzar un paso más y quitemos —-a nuestra manera, claro—- más píxeles:

<div style="font-size: 1px;
    height: 1px; background: silver;
    margin: 0px 5px"></div>
<div style="font-size: 1px;
    height: 1px; border: 2px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 3px"></div>
<div style="font-size: 1px;
    height: 2px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 2px"></div>
<div style="font-size: 1px;
    height: 1px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 1px"></div>
<div style="border: 1px solid silver; border-top: 0px none">
  Esto es una caja.
</div>

Demasiados estilos y demasiadas marcas para unas simples esquinas redondeadas, pero esto es sólo el principio. Podéis ver cómo las esquinas superiores son ahora redondas, simplemente agregando cuatro capas encima del bloque.

No hay duda de que esta técnica tiene sus ventajas:

• Si reemplazamos todo ese CSS de las etiquetas por clases, podemos cambiar muy fácilmente los colores de la caja.
• No tenemos que hacer varias conexiones con el servidor web para traernos las imágenes de las esquinas.
• No tenemos que esperar a que el navegador cargue las imágenes para ver las esquinas redondeadas.
• Podemos redondear cualquier elemento de bloque: tablas, formularios, párrafos, lo que sea.

• No tenemos que utilizar tablas para colocar las esquinas del bloque.

Sin embargo, también tiene sus limitaciones:

• No podemos simplemente poner una imagen de fondo y esperar que se recorten las esquinas. Cada capa tiene su propio fondo, y por lo tanto lo mejor es ceñirse a usar colores de fondo únicamente.
• Como se le añaden 5 píxeles por cada lado, la caja termina siendo hasta 10 píxeles más alta que antes.
• Hay que asegurarse de que tanto las cuatro capas como el bloque tienen el mismo ancho.

• El borde de la caja sólo se vé bien si es de 1 píxel de ancho.

Si queremos redondear también la parte de abajo, basta con añadir las cuatro capas en el orden inverso. Y ya de paso, arreglemos un poco el margen del texto:

<div style="font-size: 1px;
    height: 1px; background: silver;
    margin: 0px 5px"></div>
<div style="font-size: 1px;
    height: 1px; border: 2px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 3px"></div>
<div style="font-size: 1px;
    height: 2px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 2px"></div>
<div style="font-size: 1px;
    height: 1px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 1px"></div>
<div style="border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none; padding: 0px 5px">
  Esto es una caja.
</div>
<div style="font-size: 1px;
    height: 1px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 1px"></div>
<div style="font-size: 1px;
    height: 2px; border: 1px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 2px"></div>
<div style="font-size: 1px;
    height: 1px; border: 2px solid silver;
    border-top: 0px none;
    border-bottom: 0px none;
    margin: 0px 3px"></div>
<div style="font-size: 1px;
    height: 1px; background: silver;
    margin: 0px 5px"></div>

Ahí tenemos nuestra caja redondeada. En definitiva, se trata de añadir varias capas con el mismo fondo que el bloque y con tanto margen lateral como píxeles tengamos que quitar.

En el siguiente paso veremos cómo ahorrarnos el desgaste de dedos usando JavaScript para redondear automáticamente todos los elementos que queramos.