Rounded-corners for a content area has been around since long ago. HTML coders used to achieve this using table rows and columns of grid 3×3. This method works just fine for one rounded-corners content area, but when it is used repeatedly throughout a site, this method tends to generate excessive overheads. On top of that, an imperfect rounded-corners content area (with white gaps) will be seen when strict HTML mode is in use.

When CSS has gradually replaced the old table methods in various usage, we started to see rounded-corners being implemented in CSS method too. In fact, there are numerous ways of implementing rounded-corners in CSS.

I tried to dig into the pool of the Internet to figure out what’s the best method(s) to implement rounded-corners content area, and drilled down to these two methods…

Method 1: Cross-browsers Compatible

The most widely used method to ensure cross-browsers compatibility is to use CSS to smartly position the rounded-corner images at four corners of a content area.

The drawback of this method is that the color of corner images has to be the same as the background color of the content area (or the rounded-off area color). This means each set of rounded-corner images is needed for different content area color (or the rounded-off area color).

<style type="text/css">
/* Method 1: Cross-browsers Compatible */
.roundbox1 { background: #92aaf0; width: 400px; }
.roundbox1 div { padding: 0px 10px 0px 10px; }
.roundbox1 .btop, .roundbox1 .btop b, .roundbox1 .bbot, .roundbox1 .bbot b {
display: block;height: 10px;font-size: 1px;
background-image:url(corners.png);
background-repeat: no-repeat}
.roundbox1 .btop b{ background-position: 100% -10px }
.roundbox1 .bbot { background-position: 0 -20px }
.roundbox1 .bbot b{ background-position: 100% -30px }
</style>

<div class="roundbox1">
<b class="btop"><b></b></b>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam iaculis diam nec orci gravida ultrices.
Ut quis augue tellus, eu dictum turpis.
Mauris sapien urna, porttitor at consectetur id, placerat at nibh.
Ut felis orci, hendrerit at egestas convallis, accumsan quis elit.
In vel est nisl, vel lacinia elit.
</div>
<b class="bbot"><b></b></b>
</div>

Method 2: Straight-forward Non-graphical Code

This is an interesting method I’ve just discovered recently, to use the existing CSS styles to achieve rounded-corners effect. This is the most simplest and straight-forward method I’ve ever seen. And the best part is that you do not even need the rounded-corner images!

The drawback of this method is that it really depends on the CSS rendering method of client’s browser. By all means, this method will keep all Internet Explorer users out of the rounded-corner effect. Not even Internet Explorer 8 supports this feature yet.

<style type="text/css">
/* Method 2: Straight-forward Non-graphical Code */
.roundbox2 {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #92aaf0;
padding: 10px;
width: 400px;
}
</style>

<div class="roundbox2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam iaculis diam nec orci gravida ultrices.
Ut quis augue tellus, eu dictum turpis.
Mauris sapien urna, porttitor at consectetur id, placerat at nibh.
Ut felis orci, hendrerit at egestas convallis, accumsan quis elit.
In vel est nisl, vel lacinia elit.
</div>

Previews

See the previews of both methods in various browsers

Internet Explorer 7

As mentioned with disappointment, the method 2 will not work for Internet Explorer 7 (and also both IE 6 and IE 8 beta).

Firefox 3

You are seeing rounded corners for both methods!

Google Chrome

I see no difference in both methods from how Firefox renders them.

Safari 3

It renders the corners both methods exactly the same way as Firefox and Chrome do. By the way, I like it best how Safari renders the text, simply elegant!

Sample Source Code

You may download the sample code and have some hands on trial.

Go ahead, play around with the CSS, that is the only way to fully understand how both methods work.

If you came across any other methods in achieving rounded-corner effect, do share with us. It may be something new, or something that can cover all advantages of both methods mentioned above!