Caja CSS con una línea de borde redondeado

Se trata de un ejemplo un poco más sofisticado, que cambiando las imágenes, nos permitirá hacer más variedad de contenedores. Este ejercicio está basado en un artículo precedente que habría que leer antes, llamado caja con CSS para meter contenido.

Antes de empezar, también podemos ver el ejemplo que vamos a realizar.

Para realizar este ejercicio vamos a necesitar tres capas con tres imágenes que vamos a colocar de fondo. Las capas e imágenes serán colocadas arriba, para crear los redondeados superiores, en medio, para crear el borde del medio y la capa de abajo, para crear los redondeados inferiores.

La capa de en medio debe crecer más o menos dependiendo del contenido que hayamos incluido dentro de la caja, a más contenido, la capa se hará mas grande.

Las imágenes que hemos utilizado nosotros son las siguientes:

El código HTML varía un poco con respecto al que habíamos visto en los ejemplos de cajas de artículos anteriores. Como decíamos, ahora participan 3 capas distintas.

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

El código CSS para definir la clase de estilo de cada una de las tres capas es el siguiente:

.caja {     width: 482px;
    background-image: url("centro.gif");
    background-repeat: repeat-y;
}

.cajaarriba {
    background-image: url("arriba.gif");
    background-position: top center;
    background-repeat: no-repeat;
}

.cajaabajo {
    background-image: url("abajo.gif");
    background-position: bottom left;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 15px;
}

Las tres capas tienen la imagen correspondiente como fondo. Caja es la clase para la capa principal, que tiene el fondo que se debe repetir en un mosaico todo lo que crezca el contenedor.

Se puede ver el ejemplo en marcha en una página aparte.