How to create boxes with rounded corners using CSS?

I found out that it is possible and there seems to be several different ways of doing it.
This one requires only one (BIG) image, and I don't really like it: http://modxcms.com/simple-rounded-corner...
The one I chose is inspired from this example: http://www.sitepoint.com/article/css-rou...
<div class="bl">
 <div class="br">
  <div class="tl">
   <div class="tr">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
   </div>
  </div>
 </div>
</div>
<div class="clear">&nbsp;</div>

plus this css:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

In this example the images only cover the cornes, if you need them to strech out for the whole top or bottom, you have to make the tl or bl image wider. If you make it wide enough it´ll stretch as far as necessary.

Thanks the author, very useful advice. my pc's internet connection is very slow, which always drive me crazy, I want a program to solve my slow computer, several days ago my friend recommend me a software tuneup360, now I'm waiting for the result.