All these boxes resize with the text or any other content that's contained in them.
Depending on the extent of resizability you want to offer, background graphics have to be larger or smaller.
Here are just three examples but you can give both the corners and the surface any shape and texture you like since all of the box area is styled by gif-graphics. See sample graphics of this box: graphic 1, graphic 2, graphic 3, graphic 4
Inspired by Douglas Bowman's ALA article “Sliding Doors of CSS” as well as by redmelon's “Rounded Corners”.
There is a tutorial for this technique (in German) at:
www.andreas-kalt.de/webdesign/tutorials/runde_ecken.htm
On the main section of my (German-language) site there are more tutorials, over 100 webdesign-related links and reviews of webdesign books.
If you'd like to test this technique in any other browsers and on other platforms, please let me know the results.
.roundbox-tr { width:90%; margin:auto; padding:0; background:url("../gifs/roundbox_tr.gif") no-repeat right top; }
.roundbox-tl { margin:0; padding:0; background: url("../gifs/roundbox_tl.gif") no-repeat left top; }
.roundbox-br { margin:0; padding:0; background: url("../gifs/roundbox_br.gif") no-repeat right bottom; }
.roundbox-bl { margin:0; padding:0; background: url("../gifs/roundbox_bl.gif") no-repeat left bottom; }
.roundbox-content { margin:0; padding:2.5em 3.5em; }
.roundbox-content p { margin:0; padding:0; line-height:1.6; }