Bordas arredondadas com CSS sem usar imagens

Atenção!

Esse post ainda utiliza técnicas quando a CSS 3 ainda não existia. Se você quer saber fazer isso da forma mais atual, utilizando CSS 3, clique aqui e veja o post atualizado!

---

Estamos terminando o site de pré-lançamento. Quem chegou ver o Screenshot, pode perceber que todo o conteúdo é baseado em um box com bordas arredondadas sem utilizar imagens.

Lá vai nossa pergunta: Qual é a melhor forma de se fazer isso? Há muitas maneiras.  Nesse caso, utilizamos essa, postado no site: códigofonte.com.br pelo Gabriel Fróes.

Vamos lá:

CSS:

.bordaBox {background: transparent; width:98%;padding-left:4px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}
.bordaBox .b1 {margin:0 5px; background:#eff7e0;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:0px 10px 0px 10px;display:block; background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}

HTML

Podem testar, funciona! Testamos com firefox, ie7 e ie6. Atestamos que realmente é uma forma bem elegante.

Qualquer dúvida, fiquem a vontade.