Há muito tempo os desenvolvedores já vêm dando um jeitinho (POG) de utilizar bordas arredondadas em suas DIVs, tabelas, etc. Existem soluções via jQuery e várias outras gambiarras via CSS para se utilizar bordas arredondadas.

Porém todas eram justamente isso: gambiarras. O CSS3 trará trouxe uma nova propriedade justamente para acabar com essas gambiarras, a border-radius.

Atualmente, essa propriedade só está funcionando nos navegadores que utilizam as engines Gecko (Firefox) e Webkit (Safari e Google Chrome). Veja um exemplo abaixo:

Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.

Poucos navegadores a estão implementando pois a versão 3 do CSS ainda não foi finalizada, por isso a propriedade em si border-radius não funcionará em navegador algum. Para que ela funcione no Firefox, você deverá utilizar: -moz-border-radius, para funcionar em navegadores com a engine webkit: -webkit-border-radius.

Mas não se preocupe, os outros navegadores simplesmente ignoram essa propriedade caso não a possam renderizar, então você pode utilizá-la tranquilamente, perdendo apenas parte do visual nos navegadores mais antigos.

A propriedade permite que você especifique o quão arredondada você quer que a borda do elemento seja, inclusive especificando um valor diferente para cada canto do elemento, veja o exemplo abaixo e seu respectivo código:

Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.

<p style=”border: 1px solid #000000; padding: 10px; background-color: #bfe4ff; -moz-border-radius: 10px 5px 0 10px; -webkit-border-radius: 10px 5px 0 10px;”> Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.</p>

Compartilhe!