This is a Rounded Box
Rounded boxes are easy. Just make a wrapper div and inside it make a top, middle, and bottom.
Images Used
xhtml Code
Copy and Paste this into your html file
<!--Start of Rounded Box-->
<div class="roundedBox">
<div class="top">
<div class="topLeft"></div>
<div class="topRight"></div>
</div>
<div>
<div class="middleLeft" > </div>
<div class="boxContent">
<!--Insert your content here-->
</div>
<div class="middleRight"></div>
</div>
<!--Bottom of Rounded Box-->
<div class="bottom">
<div class="bottomLeft"></div>
<div class="bottomRight"></div>
</div>
<div class="clear"></div>
</div> <!--End of Rounded Box-->
CSS Code
copy and Paste this into your css file
/*--Rounded Corners--*/
/*by Pedro deCastro*/
/*axefield@gmail.com*/
.roundedBox {
background: #ececec;
}
/*Top of Rounded Box*/
.roundedBox .top {
/*When you have custom borders remove comment and insert image for top*/
background: url() repeat-x;
height: 19px;
width: 100%;
}
.roundedBox .topLeft {
float: left;
background: url(img/lightGrey_topLeft.gif) no-repeat;
width: 19px;
height: 19px;
}
.roundedBox .topRight {
float: right;
background: url(img/lightGrey_topRight.gif) no-repeat;
width: 19px;
height: 19px;
}
/*Middle of Rounded Box*/
.roundedBox .middleLeft {
width: 19px;
}
.roundedBox .boxContent {
padding: 10px;
width: 100%;
clear: both;
}
.roundedBox .middleRight {
width: 19px;
}
.roundedBox .bottom {
/*When you have custom borders remove comment and insert image for bottom*/
background: url() repeat-x;
height: 19px;
width: 100%;
}
.roundedBox .bottomLeft {
float: left;
background: url(img/lightGrey_bottomLeft.gif) no-repeat;
width: 19px;
height: 19px;
}
.roundedBox .bottomRight {
float: right;
background: url(img/lightGrey_bottomRight.gif) no-repeat;
width: 19px;
height: 19px;
}
/*--End of Rounded Corners-*/
.clear {
clear: both;
}