CSS :: Bordas arredondadas

Publicado por Celso Goya em 06/05/2005

[ Hits: 37.782 ]

 


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

Java :: Squirrel-SQL Client

Pinguins correndo pelas janelas!

weblogic :: iniciando como serviço

Fedora Core 1 :: asp2php-gui

Efetuando debug de JavaScript no Mozilla

Leitura recomendada

Melhores práticas para um site mais rápido

Acessibilidade e os padrões Web

Assinatura personalizada com imagens no Gmail

Como evitar que o CSS do teu site fique armazenado em cache

Tamanho das Fontes

  

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




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts