CSS :: Bordas arredondadas
Dica publicada em Javascript / Design
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.
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
Parabéns!