O efeito de bordas arredondas é, até hoje, uma grande dificuldade para ser aplicada em sites em HTML. É um efeito interessante, que, em navegadores modernos, já é possível ser feito em CSS3, e ficar com efeito bastante interessante. O problema, como sempre, fica com o Internet Explorer, que não aceita os comandos do Webkit ou do Mozilla como acontece com o Safari, Chrome e Firefox. No Brasil, o Internet Explorer ainda continua sendo bastante usado, por isso eu, particularmente, ainda não abandonei o desenvolvimento pra ele.

O código a seguir é a solução mais simples que encontrei para criar bordas arredondadas que funcionam nos IE’s e outros navegadores.

CSS
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }