Rounded corners are widely used as a way to isolate certain content on your webpages and, at the same time, get away from the block-ish look of everything having 90 degree right angles. Even though CSS3 has some relief coming for using simpler methods to attain the rounded corners look, it’s not supported in all browsers (especially IE) and it could be years before all the people surfing the web update their software to accommodate it. So, in the interim, we use methods like these.The difference in which of these methods you use depends upon what you want your rounded corner box to do. In most cases it’s going to expand vertically as you add content. Therefore, we’ll assume it’s going to be a fixed width horizontally. But, option #1 could expand both directions while option #2 would not expand horizontally without modifying the images.

Option #1 – using corner images

This option requires you create the corner images with all four being exactly equal in size and named according to the code sample.

CONTENT Goes In here

And the CSS being:

.roundcont {

width: 250px;

background-color: #f90;

color: #fff;

}

.roundcont p {

margin: 0 10px;

}

.roundtop {

background: url(tr.gif) no-repeat top right;

}

.roundbottom {

background: url(br.gif) no-repeat top right;

}

img.corner {

width: 15px;

height: 15px;

border: none;

display: block !important;

}

Option #2 – fixed width

The other option requires just three images, the top, middle and bottom. This method uses three div’s with the middle one being your content container. Each div has a background which is your top, middle and bottom. The middle div, though, is where your content goes and is expandable vertically depending upon that content. The nice part about this setup is you can style your borders for your box any way you wish and have uneven dimensions on the top or bottom. The center or middle is simply a div with some margins to position your text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu
eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet
ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies
eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula
interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna
lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius
vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros,
suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam
sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed
semper ac, bibendum id erat.

And, the CSS for this:

#content-top {
background-image: url('images/content-top.png');
background-repeat: no-repeat;
width: 670px;
height: 20px;
float: left;
}
#content {
background-image: url('images/content-bg.png');
background-repeat: repeat-y;
width: 670px;
min-height: 300px;

float: left;
}

#contentcontainer {
width: 650px;
margin-left: 10px;
float: left;
}

#content-bottom {
background-image: url('images/content-bottom.png');
background-repeat: no-repeat;
width: 670px;
height: 20px;
float: left;
}

Option #2 was used in a recent project for the main content area. This content holder was also the target div for the Ajax display of content from page to page. The div expands vertically without breaking in order to allow as much space as needed for the various pages being summoned into the content area.

You can view it at Myers Chiropractic Center