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
[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
ctrlc 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
[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
KGTM 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
Versão para impressora
Indicar para um amigo
Enviar dica
Mozilla 1.3.1