Rounded corners with CSS 2

Posted in CSS on 13 May 2005

We were recently interested in replacing a rounded corner nested table with a rounded corner CSS effect (see this article for our last post on this subject) and wondered whether this could be done with three suitably-styled paragraphs?

A rounded corner box can be considered to have a top, middle and bottom section – which can also be thought of as three paragraphs. Surely, a background image in two of the corners and two corner images on the page can create what we want? It’s not quite as simple as that because of differences in the way that browsers treat the padding property but with a little trial and error, we achieved the effect.

It’s probably not the most elegant method (we admit that decorative images in the page are not so great for the CSS purist) but it seemed to us to be a quite simple way of doing it (and often, that gets our vote). It works in IE6, Mozilla/Firefox and Opera 7 (other browsers have not been tested) although the box width is slightly larger in Mozilla/Firefox because of the aforesaid padding property differences. One proviso, it has not been tested on a Mac….

To start, we created four rounded corner background images in Fireworks as follows:

The top right and bottom right corner images are used as background images in the CSS classes for the top and bottom paragraphs, the other two images are placed on the page for the top left and bottom left corners.

The CSS rules are as follows for the top, middle and bottom paragraphs:

/* top section of the rounded box*/
.ptop {
background-color: #6699CC;
background-image: url(images/tright.gif);
background-repeat: no-repeat;
background-position: right top;
padding: 0px 20px 0px 0px;
margin: 0px;
width: 200px;
}
/* middle section of the rounded box*/
.pmiddle {
background-color: #6699CC;
margin: 0px;
width: 200px;
padding: 0px 10px;
}
/* bottom section of the rounded box*/
.pbottom {
background-color: #6699CC;
background-image: url(images/bright.gif);
background-repeat: no-repeat;
background-position: right bottom;
padding: 0px 20px 0px 0px;
margin: 0px;
width: 200px;
}

The rounded box HTML is simply three paragraphs (or, optionally, a header for the top section) as follows:

<p class="ptop"><img src="images/tleft.gif" width="10" height="10" alt=""></p>
<p class="pmiddle">Here is a test with some text. Here is a test with some text. A test with some text</p>
<p class="pbottom"><img src="images/bleft.gif" alt="" width="10" height="10"></p>

That’s it. You can see the final example here. One point to note, we added an extra right-padding of 20px in the .ptop and .pbottom classes to get around browser padding diferences. This value needs to be the same as the left and right padding total in .pmiddle (10px + 10px).

This method is probably not unique. It has not been extensively tested. It’s just what we were playing with recently. Feel free to use it if you want.

Related Posts

• Responsive web design is easy with fluid layouts
• Checking out responsive grid systems
• Quick tip: Making jQuery tabbed content available for users without JavaScript
• Just a few things I've seen recently
• Transparent borders with CSS3
• CSS Tip: Using max-width for flexible images