Arredondando bordas em CSS

Após ter criado seu site, com certeza não vai querer deixar que ele fique "mais do mesmo" e vai querer adicionar mais alguns efeitos visuais a ele. Vamos ensiná-los a criar bordas arredondadas em css:

Usemos nosso pequeno modelo de quadro:


[/center]
Destacado pela borda, podemos ver que o conteúdo da div acima está seco, sem nenhuma coisa que dê um "chega mais" ao conteúdo.

Vamos arredondar as bordas então, para dar uma melhoradinha? O código básico é este aqui:

classe {
border-radius: Xpx;
}

No lugar do X você poderá colocar uma quantidade de pixels, ou em inches. Quanto maior o valor inserido neste local, mais arredondadas ficarão as bordas.

Você também pode colocar o valor em inches (em), como citado acima, basta trocar Xpx, onde X é o valor do arredondamento da borda, para Xem. Os inches são um modo mais restritivos de se colocar o valor, uma vez que 1em equivale a 10px, 0.1em equivale a 1px e 0.01px equivale a 0.1px.

Lembre-se: Para valores decimais, sempre coloque o ponto (.) e não a virgula (,). Por exemplo: deve-se colocar 1.5px e não 1,5px , pois com a vírgula os browsers não aceitarão!

Vamos ver como ficou nosso div depois do arredondamento?


Aplicando a propriedade border-radius para browsers separadamente
Uma ótima funcionalidade da propriedade border-radius, para arredondamento de bordas, é que ela pode ser adaptada aos motores dos browsers separadamente, por exemplo: Se você deseja que as bordas dos seus módulos fiquem arredondadas apenas para quem visita o fórum pelo Chrome, Opera ou IE (9+) deves colocar:

classe {
-webkit-border-radius: Xpx;
}

No caso, -webkit significa que todos os navegadores com o motor WebKit verão as bordas arredondadas. Quem, por exemplo, tentar acessar com o Firefox, não verá este efeito.

Aqui está a lista completa de classes de arredondamento e para qual navegador funcionam:

Nome da classe	Para qual navegador
-moz-border-radius	Firefox (Gecko)
-webkit-border-radius	Chrome (Webkit)
-ms-border-radius	Internet Explorer (apartir do 9)
-o-border-radius	Opera (Opera)
-khtml-border-radius	Navegadores de celular

Até a próxima!