CSS :: Bordas arredondadas

Outro dia vi um site que tinha bordas arredondadas e por sua vez não utilizava imagens para construí-las, então, depois de pesquisar um pouco, encontrei um jeito para se fazer isso.

Infelizmente este recurso não funciona nos navegadores Internet Explorer, entretanto, as séries de navegadores Mozilla, que inclui o Firefox, já tem este recurso implementado.

O código é bem simples e no exemplo seguinte mostrarei como utilizá-lo em uma tag DIV.

<style type="text/css">
DIV.content {

	float: right;

	width: 550px;
	background-color:#ffffff;
	padding: 10px;
	margin-top:10px;
	margin-bottom:10px;
	-moz-border-radius-topleft: 1.0em;

	-moz-border-radius-topright: 1.0em; 
	-moz-border-radius-bottomleft: 1.0em;

	-moz-border-radius-bottomright: 1.0em;

	border: 1px solid #ccc;

}
</style>

As linhas iniciadas pelo prefixo -moz são as responsáveis pelo efeito arredondado, sendo que a medida atribuída corresponde ao valor do arredondamento.

Esta técnica de "rounded corners" substitui aquela velha "gambiarra" onde é necessário fazer imagens com os cantos desenhados como fundo de uma classe.

Veja um exemplo deste código em funcionamento:

[]'s
Celso Goya