CSS? JQuery? What's the best and most efficient way to make rounded corners that work in all browsers? I've tried a few and right now I'm making small divs that are positioned negatively outside of the relatively positioned parent divs. Instead of foreground images, I use sprites so the corner divs are less invasive. (ha ha I should give them shorter class names too)

since I'm asking for a snippet - I'll leave a snippet of what I do.

<div id="container">
    <div class="corner-top-left"></div><div class="corner-top-right"></div>
    <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
</div>
#container 
{
    display: block;
    height: 300px;
    position: relative;
    width: 500px;
}
.corner-top-left, .corner-top-right, .corner-bottom-left, .corner-bottom-right
{
    background: url(corner.png) 0 0 no-repeat;
    display: block; 
    height: 10px;
    position: absolute;
    width: 10px;
}
.corner-top-left { top: -10px; left: -10px;}
.corner-top-right { background-position: x x; top: -10px; right: -10px;} 
.corner-bottom-left { background-position: x x; bottom: -10px; left: -10px;} 
.corner-bottom-right { background-position: x x; bottom: -10px; right: -10px;}