Por Richard em 25/01/2008
Arredondar bordas no CSS nunca foi uma tarefa muito agradável. Você precisa recortar as imagens, fazer algumas piruetas com as tags e nem sempre você consegue deixar como esperado.
Se você está com pressa e precisa dos divs redondinhos right now!, dê uma olhada nas alternativas que separei para você:
- CSS Rounded Box Generator cria imagens dinâmicas nas cores que você quiser e ainda fornece os códigos do CSS e HTML na mão. Assim nem tem graça.
- O Rounded Cornr também cria imagens, fornece o código e ainda permite maior customização com extras como raio (radius) da curva e um background em degradê.
- Existe também esta técnica aqui em que você cria várias tags e classes em diversos tamanhos para simular uma borda arredondada. Suja o código e eu não aconselho, mas no desespero…
- Por último, se você é um Open Source Geek ou não liga para os usuários de IE, pode colocar no seu css o seguinte código que funciona tanto no Firefox quanto nos browsers com framework Webkit [en]:
.classe { -moz-border-radius: 10px;
-webkit-border-radius: 10px; }
Apesar de serem soluções fáceis e práticas, não se apegue a elas. Fazer o próprio código ainda é o melhor custo/benefício.
odirlon em 27/01/2008 às 11:51
Pocha eu tento e tento e ternto mas não consigo colocar o codigo
>:/
tem como ajudar?
[Responder]
Cíntia Coutinho em 23/04/2008 às 09:46
Então… os 2 primeiros links não funcionam.
[Responder]
Richard em 23/04/2008 às 15:20
Links corrigidos
[Responder]
Luiz Henrique em 11/10/2008 às 01:22
Muito bom, gostei demais… valeu pela dica…!!
[Responder]
marcos em 18/12/2009 às 17:05
sua dica foi excelente, parabéns.
[Responder]
Henrique em 18/01/2010 às 00:25
Galera seguinte
Vou mandar o que eu aprendi
procurando na internet…
CSS /* div para fazer borda redonda */
#div {
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
-moz-border-radius:10px;
/* Firefox, etc */
-khtml-border-radius:10px;
/* Konqueror, etc */
-webkit-border-radius:10px;
/* Safari, Google Chrome, etc */
-opera-border-radius:10px;
/* Opera */
}
**NÃO ESQUEÇA DE DETERMINAR O TAMANHO **
esse codigo funcionou pra min…
È muito simples…
Espero que gostem…
Fui…
[Responder]
Wagner em 16/02/2010 às 14:20
Ja usei esse ai tambem Henrique, foi a unica forma que consegui fazer funcionar no IE, acho que nos desenvolvedores deveriamos boicotar os navegadores,
pra so rodar em um, se não tem tal navegador clique aqui para instalar e ver o site.
talves assim eles tenham mais respeitos,
de agora em diante vou coloca nos meus para melhor visualização veja no FF.
Viagem…..
[Responder]