Best way to do curves? (CSS/HTML/Images)

[DaveOwl]

Decided I want to start rounding off the edges on some of my divs and other bits and have seen various methods (now helped by CSS3 but I'm not going there yet) of how to do this.

Is there any 'best' method? At the moment the one I have seen that appears to work involves 4 divs and four corner backgrounds that do not repeat but it seems to be a fair bit of code and means I have to nest my existing divs into these four plus it isn't all that flexible when the page is resized. It also doesn't seem to work very well if I only want one rounded corner or want to do anything notable with the content in the div!

If someone could advise a method that would work fine in 99.9% of cases that would be great as I want it to look good but not have lines and lines of code every time I want a corner!

The only real code I can find so far is -

.bl_on {background: url(bl.gif) 0 100% no-repeat #000000; width: 20em}
.br_on {background: url(br.gif) 100% 100% no-repeat}
.tl_on {background: url(tl.gif) 0 0 no-repeat}
.tr_on {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

and

<div class="bl_on"><div class="br_on"><div class="tl_on"><div class="tr_on">
</div></div></div></div>

 

[DaveOwl]

Thanks for that, both methods seem interesting. What about if you don't want all corners to be rounded, I think you can just specify each corner with these CSS3 implementations can't you?