CSS: Caixas com cantos arredondados

Tradução livre de artigo originalmente publicado na tutorialvault.

Bem, o efeito final é este:

Caixa com cantos arredondados

Primeiramente, você precisa de duas imagens: a parte de cima e a parte de baixo da caixa. Fiz as minhas no Fireworks, e ficaram assim:

caixa_topo.png


caixa_baixo.png

A "mágica" da técnica é associar cada imagem como background de um elemento HTML. Isso cria uma vantagem óbvia, que é a de você montar uma estrutura bem definida, mantendo seu código semântico. A estrutura ficará desta forma:

<div class="caixa-curva">

<h2>Caixa com cantos arredondados</h2>

<p>Este texto se quebra automaticamente, sem deformar o formato da caixa.</p>

</div>



Vamos agora ao CSS:

.caixa-curva
{
width: 300px;
margin: 10px;
background-color: #c3d0d4;
}

.caixa-curva h2
{
background: #c3d0d4 url(../images/caixa_topo.png) no-repeat left top;
color: #f4fbfd;
padding: 10px 15px 5px 15px;
}

.caixa-curva p
{
background: #c3d0d4 url(../images/caixa_baixo.png) no-repeat left bottom;
margin: 0px;
padding: 5px 15px 10px 15px;
text-align: left;
}

O código garante as bordas arredondadas, e o texto não provocará quebra da caixa.

Qualquer dúvida, postem nos comentários.

Abraço e até a próxima!