En este taller de CSS continuaremos un ejercicio anterior, en el que realizábamos una caja con CSS para meter contenido. Con el mismo esquema relatado en el artículo anterior, vamos a realizar otro tipo de caja -con esquinas redondeadas-, únicamente cambiando las imágenes utilizadas.

Antes de comenzar la lectura de este artículo habría que leer el artículo precedente.

También es aconsejado ver el ejemplo que vamos a construir.

Caja con esquinas redondeadas

El ejemplo que sigue es para crear un contenedor con esquinas redondeadas. Los redondeados de las esquinas los haremos con imágenes, de manera que se pueda variar el color de la caja con las mismas imágenes.

Para conseguir esto vamos a utilizar las imágenes siguientes.

Estas 2 imágenes son transparentes, menos el redondeado de los lados, que tiene color blanco. Debido a ello, estas cajas con esquinas redondeadas sólo podrá utilizarse sobre fondo blanco. Si queremos hacer una caja para utilizar sobre otro fondo, tenemos que rehacer estas imágenes cambiando el color blanco.

El código HTML sigue siendo el mismo:

<div class="cajaarriba">
<div class="cajaabajo">
Lorem ipsum dolor sit amet, consectetuer
…
</div>
</div>

Ahora vemos el código CSS. Tiene muy pocas variaciones con respecto al del ejemplo anterior:

.cajaarriba{
width: 600px;
background-image: url("arriba.gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.cajaabajo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}

Hay que fijarse que hemos definido un color de fondo en la clase cajaarriba. Si queremos que la caja varíe el color, simplemente habría que cambiar ese color de fondo.

El resultado puede verse en una página aparte.