There are many ways to build styled boxes with nice rounded corners.
The classical method is to use background pictures in <table> or <div> but it’s also possible to create this rounded effect without any picture.

Why not using pictures?

• Background pictures are badly cached by Internet Explorer.
• Every use of picture is generating an http request that can slow down your page load.
• Every different styled box will need its own set of pictures.
• To avoid printing issues.
• Solution based on pictures are not scalable.
• The HTML code you will need to structure your styled box is heavier with pictures.
• The solution without pictures  is very easy, very flexible.

The idea

<div> are used instead of pictures to create the same visual effect.
A minimum of two <div> is enough to create the effect, more <div> you will use smoother and bigger will be your round corner.

A simple solution

The code

The HTML and the CSS is very simple, no need to play with positioning, width, height or  font size.
Basic nested <div> and CSS border styles are enough.

HTML code

<div class=”sb”><div class=”sbhrl1″></div><div class=”sbhrl2″></div>
<div class=”sbHeader”>Round corner but no pictures</div>
<div class=”sbContent”>A simple solution and very flexible.</div>

The magic <div> are in bold 😀

CSS code

div.sb div.sbhrl1{border-top:1px solid #927C6A;margin-left:3px;margin-right:3px}
div.sb div.sbhrl2{border-top:2px solid #927C6A;margin-left:1px;margin-right:1px}
div.sb div.sbHeader{background-color:#927C6A;padding:0 7px 2px 7px;color:white}
div.sb div.sbContent {background-color:#FFFBE6;border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;padding:7px}

The rounded effect is created thanks to the margins of the lines (borders) added before the header text of the styled box.

sb means styled box
hrl means header round line

Others solutions

Many solution based on a JavaScript that customize a specific div are available on internet.
The method is the same as describe here but is more advanced and of course generate smoother rounded corner.