Vamos realizar uma caixa com CSS, no temos uma linha que faz a borda, toda ao redor da caixa, com as esquinas arredondadas.

Trata-se de um exemplo um pouco mais sofisticado, que mudando as imagens, nos permitirá fazer mais variedade de caixas. Este exercício está baseado em um artigo precedente que deve ser lido antes, chamado caixa com CSS para colocar conteúdo.

Antes de começar, também podemos ver o exemplo que vamos realizar.

Para realizar este exercício vamos precisar de três camadas com três imagens que vamos colocar de fundo. As camadas e imagens serão colocadas acima, para criar os arredondados superiores, no meio, para criar a borda do meio e a camada de baixo, para criar os arredondados inferiores.

A camada do meio deve crescer mais ou menos dependendo do conteúdo que tivermos incluído dentro da caixa, quanto mais conteúdo tiver, maior será a camada.

As imagens que nós utilizamos são as seguintes:

O código HTML varia um pouco com relação ao que havíamos visto nos exemplos de caixas de artigos anteriores. Como dizíamos, agora participam 3 camadas diferentes.

<div class="caixa">
    <div class="caixaacima">
       <div class="caixaabaixo">
          Lorem ipsum dolor sit amet, consectetuer
          …
       </div>
    </div>
</div>

O código CSS para definir a classe de estilo de cada uma das três camadas é o seguinte:

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

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

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

As três camadas têm a imagem correspondente como fundo. Caixa é a classe para a camada principal, que tem o fundo que se deve repetir em um mosaico tudo o que fizer a caixa crescer.

Pode-se ver o exemplo em funcionamento em uma página a parte.