CSS, Lifehack, Tutoriais

CSS: Bordas arredondadas para quem tem pressa

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ê:

  1. 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.
  2. 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ê.
  3. 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…
  4. 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.