Um dos principais elementos de design que atormentou os programadores durante muito tempo é a criação de cantos arredondados via CSS. Foram criadas diversas técnicas, algumas bastantes inventivas até, que faziam uso de imagens, scripts e uma enormidade de outras gambiarras para conseguir atingir o objetivo desejado.

Felizmente, hoje não precisamos mais nos preocupar com essas complicações, podemos simplesmente utilizar as novas declarações da versão 3.0 do CSS para atingir esse resultado sem grande esforço.

Mas é preciso abrir um grande parênteses antes de partirmos para o código. A especificação do CSS3 ainda é um trabalho em progresso e nem todos os browsers a suportam na sua plenitude. O grande problema é justamente o Internet Explorer, principalmente nas suas versões 6 e 7, que ainda são largamente utilizadas por aí.

Apesar destas versões ainda não suportarem a declaração usada para a criação de cantos arredondados, a versão 9 do Internet Explorer que ainda está sendo desenvolvida será capaz de suportar essa e todas as demais especificações do CSS3 e do HTML5.

Dito isso, vamos então ao código que deve ser usado para habilitar os cantos arredondados nos elementos do seu site. Para criar um canto com raio de 5px basta incluir as três linhas abaixo no elemento desejado.

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

Essas três declarações visam atender aos três principais browsers que suportam essa funcionalidade, o Firefox, Safari e Chrome respectivamente. Quando ela se popularizar e passar a ser utilizada pelos demais browsers poderemos partir para o uso direto da declaração border-radius, que é universal e funcionará em todos os navegadores.

Você não precisa se limitar a utilizar o mesmo raio em todos os quatro cantos, você pode definir cada um deles individualmente, utilizando uma sequência de valores, que representa os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo:

-moz-border-radius: 5px 3px 2px 1px;
-khtml-border-radius: 5px 3px 2px 1px;
-webkit-border-radius: 5px 3px 2px 1px;

É isso! Com poucas declarações o seu site pode passar a contar com os cantos arredondados de forma simples e eficiente.