Atualmente os cantos arredondados, são uma grande dor-de-cabeça no desenvolvimento, pois existem vários modos de implementar, com uma, duas ou quatro imagens?, sem imagens?, só com css?, javascript? qual javascript utilizar?, essas questões incomodam a cada vez que é necessário implementar este tipos de borda, que até o presente momento, não tem como serem feitas somente com css, quem sabe um dia, quando o css3 for lançado.

http://www.w3.org/TR/css3-background/#the-border-radius

Mas enquanto esta e muitas outras melhorias no css3 não chegam e não vão chegam nem tão cedo, temos que nos virar com o que temos, então abaixo listarei algumas técnicas que são as mais interessantes de se implementar, cada uma tem suas vantagens e desvantagens.

Cantos arredondados com uma imagem.

A imagem para criar os cantos arredondados é esta aqui embaixo, para o fundo branco e sem borda, o procedimento para criar a imagem é simples, faça um box de cantos arredondados, em seu software de edição de imagens preferido, e corte um dos cantos, faça uma imagem como a abaixo, colocando os cantos de forma que cada um fique na posição oposta ao outro.

Imagem com 4 cantos arredondados

Crie um div para segurar todo o conteúdo do box arredondado e outros dois, um para os cantos de cima e o outro para os cantos de baixo, com mais um dentro de cada um, parece complicado? mas olhe o código abaixo é bem simples…

<div class="wrap-rounded_corners">
    <div class="top_corners">
      <div></div>
    </div>
    conteúdo do box
    <div class="bottom_corners">
      <div></div>
    </div>
  </div><!-- /wrap-rounded_corners -->

E o seguinte css:


/* define o estilo para o box que segura todo o conteúdo
   o overflow hidden é para esconder o que estiver para 
   fora da div.wrap-rounded_corners, retire e veja o que acontece
*/
div.wrap-rounded_corners {
        margin: 10px;
        padding: 0 10px;
        background: #0f0;
        overflow: hidden;
}

/* define que todos os divs abaixo terão posição relativa, 
    largura de 100% e 9px de altura */
div.wrap-rounded_corners div.top_corners,
div.wrap-rounded_corners div.top_corners div,
div.wrap-rounded_corners div.bottom_corners,
div.wrap-rounded_corners div.bottom_corners div {
        position: relative;
        width: 100%;
        height: 9px;
}

/* define que esta div tem o posicionamento relativo à esquerda negativa em 10px,
    para compensar os 10px de padding da div.wrap-rounded_corners
*/
div.wrap-rounded_corners div.top_corners {
  left: -10px;
  background: transparent url(images/corners.gif) no-repeat -10px -10px;
}

/* define que esta div tem o posicionamento relativo à direita negativa em 30px,
    para compensar os 20px de padding (10px de cada lado) da div.wrap-rounded_corners
    e os 10px de margem negativa da div.top_corners
*/
div.wrap-rounded_corners div.top_corners div {
  right: -30px;
  background: transparent url(images/corners.gif) no-repeat right -10px;
}

/* define que esta div tem o posicionamento relativo à esquerda negativa em 10px,
    para compensar os 10px de padding da div.wrap-rounded_corners
*/
div.wrap-rounded_corners div.bottom_corners {
  left: -10px;
  background: #f00 url(images/corners.gif) no-repeat -10px 0;
}

/* define que esta div tem o posicionamento relativo à direita negativa em 30px,
    para compensar os 20px de padding (10px de cada lado) da div.wrap-rounded_corners
    e os 10px de margem negativa da div.bottom_corners e o overflow hidden, para corrigir 
    um bug do IEca que aparentemente não tem explicação para estar ocorrendo, 
    retire e veja do que estou falando
*/
div.wrap-rounded_corners div.bottom_corners div {
  right: -30px;
  background: transparent url(images/corners.gif) no-repeat right 0;
  overflow:hidden;
}

Você pode conferir aqui este exemplo funcionando.

Cantos arredondados com duas imagens.

Este tipo de canto arredondado é para um box com largura fixa, o procedimento é simples, é so criar duas imagens, uma com cantos arredondados de cima, e outra com os cantos de baixo, como estas do exemplo abaixo.

Cantos arredondados superiores Cantos arredondados inferiores

Agora, é só criar dois divs, como no exemplo abaixo, um dentro do outro e colocar uma classe em cada um, se quizer caso não queira não tem necessidade, mas é melhor para nao haver problemas, de herança de estilos, com outras divs que possam estar dentro do box:

<div class="top_corners">
  <div class="bottom_corners">
    conteudo do box
  </div><!-- /bottom_corners -->
</div><!-- /top_corners -->

e o seguinte css:


    /*
      Esta div é para segurar todo o conteudo do box de cantos arredondados, 
      definindo a largura do box, e colocando a cor de fundo e a imagem dos cantos superiores
    */
      div.top_corners {
        width: 104px;
        background: #2a70ff url(images/rounded_top.gif) no-repeat 0 0;
      }

      /*
        e esta div é para os cantos inferiores, coloca-se a imagem dos cantos 
        inferiores com alinhamento ao rodape, esta div não deve ter cor de fundo,
        pois caso tenha irá "esconder" os cantos superiores, e um espaçamento 
        para não ter nenhum conteúdo sobre os cantos.
      */
      div.top_corners div.bottom_corners {
        padding: 10px;
        background: transparent url(images/rounded_bottom.gif) no-repeat 0 bottom;
      }

Você pode conferir aqui este exemplo funcionando.

Estes foram dois exemplos simples para dar a direção de como podem ser feitos boxes com cantos arredondados, existem uma grande variedade de possibilidades para fazer os cantos arredondados, é só colocar a cabeça para funcionar que surgirão idéias para resolver o problema.

Agora mostrarei alguns javascripts para fazer os cantos arredondados que você irá ver os prós e contras para ver se é melhor ou pior que fazer com imagens, um ponto a favor é que são “menos trabalhosos” de se implementar e um contra, se o site for “grande e/ou pesado” pode demorar “renderizar” os cantos arredondados.

O primeiro exemplo é o do transcorners, que foi criado por um(a) “cara” ou site chamado Inviz , que o site não está mais no ar, pelo menos não esta pagina, que por acaso eu so consegui depois de sofrer muito em achar para deixar de exemplo, e so me dei esse trabalho porque é um bom script.

Você pode conferir o exemplo funcionado. (em inglês)

Este outro exemplo de javascript foi visto aqui, que por acaso estava fora no momento em que estava escrevendo este post.

Não sei se utilizei todas as configurações disponiveis no exemplo, caso não tenham sido, me avise que coloco todas as propriedades possiveis. Este script é bastante simples de ser implementado e compreendido, ele pode ser conferido aqui.

Esses foram somente alguns exemplos de como colocar em prática os cantos arredondados, caso queira mais algum exemplo vc pode usar um de seus amigos, o Google ou o Yahoo, ou o seu site de buscas preferido, ou este excelente link no CssJuice com uma lista de 25 técnicas diferentes de cantos arredondados.

[]´s e até o próximo post, que pretendo que não demore tanto novamente.