CSS :: Bordas arredondadas

Publicado por Celso Goya em 06/05/2005

[ Hits: 38.212 ]

 


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

Outras dicas deste autor

Maximizando o uso da lixeira

su/sudo em modo visual

Vim com a syntax colorida para PHP, C++, Pascal, etc

Fedora Core 1 :: asp2php-gui

gnoCHM :: Visualizador de arquivos de ajuda

Leitura recomendada

Botões com imagem cambiável

Tamanho das Fontes

Para sempre VOL

CSS: Colocar imagem personalizada como botão submit

Melhores práticas para um site mais rápido

  

Comentários
[1] Comentário enviado por jhenrique em 07/05/2005 - 03:53h

Muito legal! Excelente essa dica!
Parabéns!

[2] Comentário enviado por vioflex em 07/05/2005 - 14:18h

Muito legal!
Parabéns!

[3] Comentário enviado por internero em 07/05/2005 - 20:30h

Muito legal o efeito porém ele se baseia em um recurso ainda não padronizado pelo w3c - por isso o prefixo "-moz" antes dos comandos.

Apesar disso, a aceitação desse recurso parece estar muito boa e isso contribui diretamente para que o padrão CSS3 seja homologado mais rapidamente.

em tempo: ótima dica Celso! Abraço

[4] Comentário enviado por usifoto em 08/05/2005 - 00:05h

Boa dica.

Estou construindo o meu site pessoal e vou utilizar esse código.

Valeu!

[5] Comentário enviado por ygorth em 08/05/2005 - 03:14h

Muito interessante,

mais uma vez o IE só corre atras para implementar coisas inuteis.

[]´s

[6] Comentário enviado por Psycho_DarknesS em 08/05/2005 - 14:21h

IEca naverdade hehehe
Firefox eh mto melhor que IE não precisa nem falar neh?
Ótima dica!

[]´s

[7] Comentário enviado por mbmaciel em 09/05/2005 - 00:34h

Fala Celso,

Eu tenho um link que mostra essa solução de outra maneira:

http://pro.html.it/esempio/nifty/
E ainda funciona no IEca !

E aqui meus links de css no delicious. ;-)
http://del.icio.us/mbmaciel/css

[8] Comentário enviado por alexandremas em 09/05/2005 - 11:13h

Excelente comentário do mordecai, aprimorando a dica.

[9] Comentário enviado por filype em 28/10/2005 - 11:47h

muito legal!

Alguem pode me dizer se isto é caracteristica do Firefox, ou é uma espicificação da W3c

[10] Comentário enviado por filype em 28/10/2005 - 12:50h

segundo o nosso amigo internero, realmente é padrão mozila mesmo.

[11] Comentário enviado por ramonklown em 01/11/2005 - 16:45h

basta abrir no ie para ver o resultado, é padrão moz. Não é padrão W3C ou seja não é válido para produção. (a utilização do -moz)

mas o link do nosso amigo mordecai é muito bom, gostei muito. Faz a borda redonda respeitando os padrões.
http://pro.html.it/esempio/nifty/

Valeu

[12] Comentário enviado por marco_sistemas em 26/01/2007 - 15:47h

Grande Celso mandou bem eu fazia as famosas gambiarras,
mas agora sei como fazer sem ;D
soh o ruim naum tah no padrao W3C
e vlw tbm ao mordecai, excelente links ;D

[13] Comentário enviado por anapaulinhaaa em 05/03/2008 - 11:34h

Muito bom, mas não funciona no IE. Alguém tem uma solução ou hacker que pode ser utilizado?????
Obrigada

[14] Comentário enviado por terradosloucos em 24/10/2008 - 00:17h

Muito bom!!!

Já to usando!! heheh... só não tive a oportunidade de testar no IE ainda.. mas ... vale a pena!!

Abraço.

[15] Comentário enviado por comfaa em 28/10/2008 - 13:23h

bem legal

[16] Comentário enviado por removido em 04/05/2009 - 18:38h

Escusa de testar no IE colega, borders redondas ainda está em teste e so está disponivel para firefox xD
Firefox sempre a testar para melhorar :D

[17] Comentário enviado por chcdc em 02/06/2010 - 11:28h

Muito boa essa dica...

muito interessante



Contribuir com comentário