25/01/2008Arredondar 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 diz:
27/01/2008 as 11:51
Pocha eu tento e tento e ternto mas não consigo colocar o codigo
>:/
tem como ajudar?
[Responder]
Cíntia Coutinho diz:
23/04/2008 as 09:46
Então… os 2 primeiros links não funcionam.
[Responder]
Richard diz:
23/04/2008 as 15:20
Links corrigidos
[Responder]
Luiz Henrique diz:
11/10/2008 as 01:22
Muito bom, gostei demais… valeu pela dica…!!
[Responder]
marcos diz:
18/12/2009 as 17:05
sua dica foi excelente, parabéns.
[Responder]
Henrique diz:
18/01/2010 as 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 diz:
16/02/2010 as 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]
Paula Eveling diz:
03/04/2010 as 11:21
Henrique, seu código funcionou corretamente, agradeço.
Atenciosamente.
[Responder]
Bordas arredondadas com CSS diz:
12/04/2010 as 23:57
[...] http://www.richardbarros.com.br/blog/css/css-bordas-arredondadas-para-quem-tem-pressa (ver post e [...]