Box com cantos arredondados

Publicado em: 10/08/2006

Estudo de uma técnica

A construção de boxes com cantos arredondados é uma técnica CSS que apresenta muitas variações e cujo assunto tem sido objeto de inúmeros tutoriais publicados na Web. Uma busca no Google por "CSS rounded corners" (cantos arredondados com CSS) retorna mais de 5 milhões de páginas.
Recentemente Ryan Thrash publicou matéria mostrando um aperfeiçoamento da técnica de construção de boxes com cantos arredondados por ele inventada em novembro de 2003. Àquela época, a técnica teve o reconhecimento dos 'experts', tendo sido citada no Blog do Dave Shea criador do CSS Zen Garden e em comentários abonadores de Eric Meyer na lista de discussão CSS-D. A técnica é comprovadamente atual, tanto que mereceu um aperfeiçoamento. Contudo como já citado existem muitas técnicas para obter o efeito de cantos arredondados com CSS e a opção pelo uso desta ou daquela cabe exclusivamente à você. Eu, considero esta técnica muito interessante e não faço qualquer restrição ao seu uso.
Este tutorial não é uma tradução do original, visto que o original não detalha a construção dos boxes e aqui farei um estudo de como obter o efeito.

A teoria

Tal como a maioria das técnicas para construção de cantos arredondados, esta também utiliza imagens de fundo para simular os cantos.
As CSS2.1 estabelecem que somente uma imagem pode ser definida como fundo de um elemento HTML. Baseado nestas premissas a solução mais simplista, é a de construir um retângulo com bordas arredondadas e colocá-lo como imagem de fundo de um elemento nível de bloco, como por exemplo, uma DIV. Esta solução fixa as dimensões do box e qualquer redimensionamento de texto arruina o layout. É uma solução restrita a condições muito específicas e seu valor prático é muito baixo.

No outro extremo, surge a solução de se usar 4 elementos nível de bloco, cada um deles tendo como imagem de fundo um dos cantos do box convenientemente posicionado.
Foi baseado nesta teoria que surgiu a técnica aqui mostrada. A versão inicial utiliza uma imagem constituida de um retângulo com bordas arredondadas para fundo dos 4 elementos. Na recente versão o autor dividiu ('fatiou') a imagem inicial em 4, e usa uma para cada elemento.
Existem duas abordagens de construção do box neste tutorial, a primeira especifica uma largura em unidades CSS em e a outra uma largura em percentagem. Na primeira o box permanece com a mesma largura qualquer que seja a resolução, contudo 'cresce' e 'encolhe' com o redimensionamento do texto (não ocorre ruina do layout) e na segunda o box 'cresce' e 'encolhe' tanto com o redimensionamento do texto como com a resolução.

As 4 imagens usadas

A seguir link para as 4 imagens usadas neste tutorial

canto-sup-esq.jpg - imagem do canto superior esquerdo - 80 x 203px

canto-sup-dir.jpg - imagem do canto superior direito - 960 x 203px

canto-inf-esq.jpg - imagem do canto inferior esquerdo - 80 x 429px

canto-inf-dir.jpg - imagem do canto inferior direito - 960 x 429px

Atualização em 24 de outubro de 2010: Notar que a soma das larguras das imagens é igual a 80px + 960px = 1040px. Essa é a maior largura total do box. Se você pretende que o box cresça para larguras maiores, aumente a largura das imagens para os cantos superior direito e inferior direito.

A marcação estrutural

O box tem um título e um texto. Para marcar o título usei neste tutorial o nível seis de cabeçalhos <h6></h6>. Não estranhe, assim fiz para evitar interferência dos estilos do site no título uma vez que não uso o nível 6 no site e assim ele não está estilizado nas folhas do site. Você pode usar o nível que quiser e estilizar como bem entender.

A marcação é a mesma para as duas abordagens de construção. Mudei apenas a classe da DIV mais externa, usando class="fixo" para o box com largura em em e class="elastico" para o box com a largura em percentagem. Isto possibilitou mostrar os dois boxes em uma mesma página (obrigado aos seletores descententes por possibilitar isto):

<div id="boxes">
<div class="fixo">
	<div class="titulo">
	  <h6>Escreva certo</h6>
	</div>
	<div class="conteudo">
		<p>O verbo haver quando empregado 
com o sentido de existir, é invariável.</p>
		<p>Exemplos:<br /> 
		 <q>Havia muitos e-mails</q><br />
		 <q>Houve muitas páginas</q><br />
		 <q>Pode haver outras DIVs</q>
		  </p>
	</div>
</div>

<div class="elastico">
	<div class="titulo">
	  <h6>Escreva certo</h6>
	</div>
	<div class="conteudo">
		<p>Use<strong> ao invés de</strong> para 
significar <strong>ao contrário</strong>, 
ou seja, com idéia de oposição. </p>
		<p>Exemplos: <br />
		  <q>Pefiro usar preto ao invés de branco.</q><br />
		  <q>Ao invés de chorar ela sorriu.</q></p>
		<p>Use<strong> em vez de</strong> para significar 
<strong>em lugar de</strong>, ou seja, não há idéia de oposição.</p>
		<p>Exemplos:<br />
		  <q>Pefiro usar uma DIV em vez de uma tabela.</q></p>
	</div>
</div>

</div><

A folha de estilos

#boxes {
	font: 0.9em Arial, Helvetica, sans-serif;
	width:100%;
	color:#333; 
	margin: 0;
	}
.fixo {
	margin: 0 auto;
	width: 25em;
	background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
	font-size: 100%;
	}
.titulo {
	background: url(canto-sup-dir.jpg) no-repeat 100% 0;
	margin: 0;
	padding: 0;
	text-align: center;
	}
.titulo h6 { 
	background: url(canto-sup-esq.jpg) no-repeat 0 0;
	margin: 0;
	padding: 45px 20px 5px;
	color: #333; 
	font-weight: bold; 
	font-size: 1.4em; 
	line-height: 1.0em;
	}
* html .titulo h6 {height: 1%;} /* Hack para IE5 PC */
.conteudo {
	background: url(canto-inf-esq.jpg) no-repeat  0 100%;
	color:#fff;
	margin: 0;
	padding: 5px 35px 45px;
	}
#boxes .conteudo p {
	margin:0.7em;
	line-height:1.2em;
	}
.elastico {
	width:100%;
	background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
	font-size: 100%;
		}

A renderização

Teste você mesmo

Redimensione a janela do seu navegador e observe o comportamento dos dois boxes.
Agora aumente e diminua o tamanho da fonte no navegador e observe o comportamento dos dois boxes.