CSS: rounded edge / corner box

CSS:

.mainbody {
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CCC;
 border-left-color: #CCC;
 padding-right: 10px;
 padding-left: 10px;
}
.topcenter {
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #CCC;
}
.bottomcenter {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #CCC;
 height: 4px;
}
.topleft {
 background-image: url(images/corners_topleft.gif);
 background-repeat: no-repeat;
 background-position: left top;
 height: 5px;
 width: 5px;
 float: left;
}
.topright {
 background-image: url(images/corners_topright.gif);
 background-position: right top;
 float: right;
 background-repeat: no-repeat;
 height: 5px;
 width: 5px;
}
.bottomright {
 background-image: url(images/corners_bottomright.gif);
 background-repeat: no-repeat;
 background-position: right top;
 float: right;
 height: 5px;
 width: 5px;
}
.bottomleft {
 background-image: url(images/corners_bottomleft.gif);
 background-repeat: no-repeat;
 background-position: left top;
 height: 5px;
 width: 5px;
 float: left;
}
.topbottom {
 height: 5px;
}

HTML:

<div>
<div class="topbottom">
<div class="topleft"></div>
<div class="topright"></div>
<div class="topcenter"></div>
</div>
<div class="mainbody">content</div>
<div class="topbottom">
<div class="bottomleft"></div>
<div class="bottomright"></div>
<div class="bottomcenter"></div>
</div>
</div>