Esquinas redondeadas con CSS

Existen muchas formas de conseguir un efecto de esquinas redondeadas con CSS. En nuestro taller de CSS ya vimos algunas maneras de hacer ese efecto. En este artículo vamos a ver otras maneras interesantes porque nos permiten construir cajas de anchura y color variable. Lo malo de este método es que no funciona con Internet Explorer, pues utiliza los pseudo-elementos after o before, que por el momento no tienen soporte en el navegador de Microsoft.

Este método de conseguir las esquinas redondeadas con CSS lo he visto en el artículo Rounded corners in CSS, yo simplemente me he dedicado a adaptarlo a otro diseño. Podemos ver el resultado final del ejercicio en una página aparte.

Para el ejemplo utilizo varias imágenes que he puesto en un archivo para descarga. Como veréis, hemos utilizado imágenes en formato png, porque se adaptan mejor a nuestras necesidades, por el adecuado tratamiento que da el formato png a las transparencias.

Como decía, lo bueno de este sistema es que soporta cajas de cualquier anchura o altura. Pero no sólo eso, sino que también permite cajas de cualquier color de fondo que se quiera emplear, utilizando las mismas imágenes para crear el efecto de esquinas redondeadas.

La técnica que se utiliza en este caso es la utilización de pseudo-elementos after o before, para insertar antes y después del recuadro las imágenes con borde redondeado en las cuatro esquinas. Para ello se han creado las siguientes definiciones de estilos CSS.

.redondeado:before {
   background: transparent url(arr-der.png) scroll no-repeat top right;
   margin-bottom: -10px;
   height: 14px;
   display: block;
   border: none;
   content: url(arr-izq.png);
   padding: 0;
   line-height: 0.1;
   font-size: 1px;
}

.redondeado:after {
   display: block;
   line-height: 0.1;
   font-size: 1px;
   content: url(aba-izq.png);
   margin: 2px 0 0 0;
   height: 14px;
   background: transparent url(aba-der.png) scroll no-repeat bottom right;
   padding: 0;
}

Como se puede ver, se ha creado una clase "redondeado" utilizado las cuatro imágenes de las esquinas, insertándolas como contenido y fondo de los elementos de antes y después del elemento HTML que deseamos que aparezca redondeado.

La definición de la clase redondeado se completa con otras declaraciones de estilos:

.redondeado * {
   padding-left: 25px;
   padding-right: 25px;
}

.redondeado {
   padding: 0;
   background: #993333;
   color: white;
   margin-right: -1px;
}

La primera sirve para indicar que cualquier etiqueta o elemento que se coloque dentro de la caja con class=redondeado tenga un espaciado a la derecha y la izquierda.

En la segunda declaración se añaden nuevos estilos a la clase redondeado, entre los que se incluye el color de fondo.

El código HTML para hacer una capa con esquinas redondeadas sería el siguiente:

<div class="redondeado">
<p>
Texto de la caja con esquinas redondas?
</p>
</div>

Se puede ver que el código HTML queda extremadamente limpio.

Podemos experimentar con diversos colores de fondo para el elemento o la caja con las esquinas redondeadas, para adaptarlas a nuestras necesidades. Dejo aquí dos enlaces al mismo ejercicio simplemente cambiando el color de fondo:

• Ejemplo con el color de fondo en rojo.
• Ejemplo con una textura o imagen de fondo.

Se puede jugar también con otras imágenes, pero si cambiamos el tamaño de las imágenes tendremos que cambiar algunos valores de márgenes de los pseudos elementos after y before. Lo mejor es que veáis el código fuente de los resultados finales para entenderlos y adaptarlos a vuestras necesidades.

Esta técnica tiene un problema, lamentablemente bastante gordo, que no funciona en Internet Explorer porque no tiene en cuenta los pseudo-elements after y before. En Internet Explorer 7 no funciona y no lo he probado todavía en Internet Explorer 8, que ya está en fase beta. Pero esperemos que el navegador de Microsoft se adapte pronto a las características avanzadas de CSS2.