Bordas arredondadas com CSS

Com a chegada do CSS3, adicionar bordas arredondadas nos elementos ficou muito simples e pode ser feito usando apenas CSS, sem a necessidade daquele monte de imagens pra gerar as bordas e todos os problemas as dores de cabeça com alinhamento que elas acabam causando.

Basicamente o atributo css que vamos usar é o "border-radius".

Esta caixa deve ter uma cantos arredondados para o Firefox, Safari / Chrome, Opera e IE9.

O código usado é bastante simples:


# Exemplo1 {border-radius: 8px; }
Porém navegadores como o firefox e google chrome tem precisam do prefixo -moz- e -webkit- respectivamente para renderizar as bordas arrendondadas.

Neste caso nosso exemplo ficaria assim:


#Exemplo2{-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
Assim vai funcionar na maioria dos navegadores com suporte a CSS3. Infelizmente no bosta do Internet Explorer 8 (e anteriores) não funciona. Obrigando o uso de hacks ou outras soluções paleativas!

As bordas podem ser arredondadas individualmente usando os atributos border-bottom-left-radius, border-top-left-radius, border-bottom-right-radius e border-top-right-radius.

Neste exemplo as bordas estão arredondadas com tamanhos diferentes.

Então o código fica assim:


#Exemplo3{
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 80px;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 75px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 80px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 75px;
border-top-left-radius: 8px;
border-top-right-radius: 80px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 75px;
}
Muito css? Ainda bem que existe sempre alguem que já pensou nisso.
Se você acha chato ficar colocando os prefixos -moz- e -webikit- antes do atributo border-radius pra funcionar nos navegadores, você pode entrar no http://border-radius.com/ e criar as bordas por lá, depois é só copiar e colar no seu código.

Nota adicional:
O W3C trata desse assunto detalhadamente na sessão http://www.w3.org/TR/css3-background/
Especificamente nos tópicos:

• 4.4.1 Corner Shaping
• 4.4.2 Corner Clipping
• 4.4.3 Color and Style Transitions
• 4.4.4 Overlapping Curves
• 4.4.5 Effect on Tables