Simple Fixed Width Rounded Box with CSS
November 10th, 2008
No comments
Here is a simple fixed width css rounded box.
Sample Rounded Box
The Rounded Box will look like this. This rounded box uses two background images, one at the top and the other at the bottom.
Rounded Box
This is a simple, fixed width rounded box.
This uses 3 divs, 2 images and 3 css classes.
Tested in Firefox 3+, IE6, IE7, Opera 9.6, Safari 3 and Google Chrome
HTML Markup
<div class="rbox"> <div class="heading"> Rounded Box </div> <div class="boxContent"> Your content goes here </div> </div>
CSS Code
.rbox {
width: 188px; /*The width of the images */
background-image: url('rboxBottom.gif');
background-position: bottom;
background-repeat: no-repeat;
border-bottom: solid 1px white; /*If this is omitted, it wont work in Firefox*/
}
.rbox .heading {
padding-left: 10px;
background-image: url('rboxHead.gif');
border-bottom: solid 1px #cccccc;
}
.rbox .boxContent {
margin-bottom: 18px; /* The height of the bottom image*/
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
padding: 10px;
}
