There are many examples on the web of rounded boxes using graphic images to define the surrounding border, but did you know you can achieve the same effect WITHOUT using graphics?
All it takes is a little bit of CSS trickery, which by the way is cross-browser complaint :)
This box does not use any graphics to render the curved edges.
The height of the box is not set - it just extends to accommodate the enclosed elements. Which means it scales elegantly.
Lorem ipsum dolor sit amet consectetuer odio Nunc libero enim eget. Lobortis consequat In nibh id rutrum nulla semper ac Curabitur Phasellus. Nunc ac mus porttitor volutpat turpis In ut tempor libero id.
Pretium Sed porta adipiscing wisi condimentum elit Vivamus in faucibus convallis
Congue sed turpis vitae eget nibh feugiat.
The curved edges are constructed using the <b> tag, together with several styling rules.
The HTML for the box looks like this:
<div class="greenbox" >
<b class="boxtop">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
<div class="boxcontent">
<p>This box does not use any graphics to render the curved edges.</p>
</div>
<b class="boxbottom">
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>
</div>
Quite a lot of tags. But they are all necessary as each of the <b> tags represents one section of the curve.
Here is the CSS for the box (be careful when copying as some of the lines are long):
.greenbox {background: transparent; margin:10px 0 0 10px}
.greenbox h1, .greenbox p, .greenbox ul {margin:0 10px;}
.greenbox h1 {font-size:2em; letter-spacing:1px;}
.greenbox p {padding-bottom:0.5em;color:#A0C478}
.greenbox ul {list-style-type:none;}
.greenbox .boxtop, .greenbox .boxbottom {display:block; background:transparent; font-size:1px;}
.greenbox .b1, .greenbox .b2, .greenbox .b3, .greenbox .b4, .greenbox .b1b, .greenbox .b2b, .greenbox .b3b, .greenbox .b4b {display:block; overflow:hidden;}
.greenbox .b1, .greenbox .b2, .greenbox .b3, .greenbox .b1b, .greenbox .b2b, .greenbox .b3b {height:1px;}
.greenbox .b2, .greenbox .b3, .greenbox .b4, .greenbox .b4b, .greenbox .b3b, .greenbox .b2b {background:#3B4405; border-left:1px solid black; border-right:1px solid black;}
.greenbox .b1, .greenbox .b1b {margin:0 5px; background:black;}
.greenbox .b2, .greenbox .b2b {margin:0 3px; border-width:0 2px;}
.greenbox .b3, .greenbox .b3b {margin:0 2px;}
.greenbox .b4, .greenbox .b4b {height:2px; margin:0 1px;}
.greenbox .boxcontent {display:block; background:#3B4405; border-left:1px solid black; border-right:1px solid black;}
Quite a lot of CSS for such a small box, but I have been really lazy here and left in a lot of the styling used for headings and the like.
NOTE: There is one small issue with using this technique - any content inside a box must be inside <p></p> paragraph tags, otherwise unwanted spacing appears.