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.
Para aprender CSS, eu recomendo dois ótimos e já consagrados livros. O Construindo Sites com CSS e (X)HTML para quem está começando e o internacional CSS Mastery caso já tenha certa experiência com a linguagem.
Fonte: http://www.richardbarros.com.br
