.top-left {
margin-right: 9px; /* clip right corner */
background-image: url('/images/roundCorner/corners_light_1280x18.gif');
height: 9px; /* vertical: show first half of the image with the top-corners in it */
font-size: 2px; /* correct height for IE */
}

.top-right {
margin-top: -9px; /* to level of top-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('/images/roundCorner/corners_light_1280x18.gif'); 
background-position: 100% 0; /* show bg-image starting at the right */
height: 9px; 
font-size: 2px;
}

.bottom-left {
margin-right: 9px; /* clip right corner */

background-image: url('/images/roundCorner/corners_light_1280x18.gif');
background-position: 0 -9px; /* show under half of the image */
height: 9px;
font-size: 2px;
}

.bottom-right {
margin-top: -9px; /* to level of bottom-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('/images/roundCorner/corners_light_1280x18.gif'); 
background-position: 100% -9px; /* under half, right side */
height: 9px; 
font-size: 2px; 
}

.inside {
border-left: 1px solid #c3b66a;
border-right: 1px solid #c3b66a;
background: #fff;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}

.notopgap {
margin-top: 0;
}

.nobottomgap {
margin-bottom: 0;
}




/*
How to use it.
---------------


<div class="top-left"></div><div class="top-right"></div><div class="inside">
<p class="notopgap">...</p>...
<p class="nobottomgap">...</p>
<!--<p class="notopgap nobottomgap">...</p>-->
</div><div class="bottom-left"></div><div class="bottom-right"></div>


*/