If you know the width of your boxes then the best way may be to just give them image backgrounds, made of the rounded-corner box image split in two (kind of like the sliding doors/A List Apart technique turned sideways).
Make one box far bigger than it needs to be and use the small one as an actual image element. I often also use this this for clearing floats too.
The large image will be your background which will resize as your user resizes text. Use background-position if you have to use the HTML image element in the top of your box.
.rounded-corners-box {
width: 500px;
background: url(/path/to/our/rounded-corners-image-large.img) no-repeat;
}
.corners-bottom {
display: block;
}
<div class="rounded-corners-box">
<h2>This is some content</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<img class="corners-bottom" src="/path/to/our/rounded-corner-image-small.img" alt="">
</div>
You can see examples of this in the sidebar on the home page at my site (URL in my sig).
If you want to save the messy extra fluff image you can insert it with JavaScript to keep your HTML clean.
