<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div>
<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div>
<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div><style type="text/css">
 
#container {
margin-bottom:30px;
}
.rtop, .rbottom{display:block; }

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden;
background: red;}

.r1{margin: 0 5px;}

.r2{margin: 0 3px }

.r3{margin: 0 2px;
}

.r4{margin: 0 1px; height: 2px;}
</style>

http://www.internetsplash.com/

based on http://snipplr.com/view.php?codeview&id=1460, but actually works stright out of the box

rounded corners with no images, just css, THAT WORKS

css, images

HTML