Como fazer bordas arredondadas com CSS

Eu já falei que odeio o Internet Explorer? Sim, e várias vezes seja aqui ou no Twitter. Algumas funcionalidades (scripts ou hacks) simplesmente deixam de funcionar ou acabam com o lay out da página.

Um exemplo disso é a criação de bordas arredondadas sem o uso de imagens, apenas usando CSS. Browsers como o Firefox(Eu o amo!!!), Chrome e o Safari já apresentam em seus códigos o reconhecimento das especificações do CSS3, mas o Explorer, bem que mer...cadoria!!!

O meu template tinha bordas arredondadas feitas a partir de imagens. Muitas vezes o servidor dava pau e elas simplesmente desapareciam, por isso deletei por completo qualquer vestígio delas, deixando as colunas retas.

Para colocar bordas arredondadas sem imagens basta inserir no CSS de seu template uma propriedade nova chamada border-radius que define o tamanho do raio da curva:

border-radius: 10px;

Essa propriedade irá definir um raio de 10 px em cada canto da borda.

Como essa funcionalidade ainda não está totalmente implementada, os navegadores deram nomes especiais para essa propriedade. Para o Firefox, esse atributo fica assim:

-moz-border-radius: 10px;

Para aqueles que são baseados no Webkit , como o Chrome e o Safari, o atributo fica desse jeito;

-webkit-border-radius: 10px;

Dessa maneira, devemos acrescentar no CSS de cada coluna esse atributo da seguinte maneira:

coluna qualquer (header, main, sidebar, footer, etc){
-moz-border-radius: 10px;/* para funcionar no Firefox*/
-webkit-border-radius: 10px;/* para funcionar no Chrome ou no Safari */
border-radius: 10px;/* É bom colocar caso haja alguma compatibilidade no futuro */
}

Como exemplo, vocês podem ver esse atributo funcionando acima, no meu header. Legal, não? Se você estiver lendo o meu blog no IE, infelizmente não verá nada. Dançou, playboy!!!

E vou repetir de novo: Odeio o IE!

Além do mais, você pode criar bordas circulares apenas alterando as medidas em px. Tente criar uma div colocando 200px no comprimento do raio da borda, e veja o resultado que acontece.

E eu que odiava o CSS... Mas depois que comecei a decifrá-lo e entendê-lo, vi a maravilha de linguagem que é. Styles really rock, man!!!

Fontes: Maujor e Somebo