STYLE SHEETS

Building Rounded Corners with CSS3

In this first part of a series, I provide you with a friendly introduction to building rounded corners with CSS3. In this initial stage, I show you how to create this popular decorative effect on web pages using four different background images, which were assigned to the same HTML container. This technique is impossible with current CSS methods.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

March 10, 2010

TABLE OF CONTENTS:

As you’ll possibly know, fixed web page layouts are slightly more permissive when it comes to building rounded corners, as they allow you to use fewer elements, in addition to keeping the markup relatively clean. In most cases, implementing the effect requires only the use of two background images, similar to the ones shown below:

Properly armed with the corresponding set of background graphics, creating a fixed-width rounded corner container is as simple as coding the following web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Building rounded corners using two divs</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

.rounded_container {

width: 400px;

background: #39f url("rounded_bottom.gif") center bottom no-repeat;

padding-bottom: 20px;

}

.rounded_container h2 {

background: url("rounded_top.gif") center top no-repeat;

padding: 20px 0 0 20px;

}

.rounded_container p {

padding: 0 20px 0 20px;

}

</style>

</head>

<body>

<h1>Building rounded corners using two divs</h1>

</div>

<h2>Main content section</h2>

<h2>Rounded container</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Well, you’ll have to admit that this example looks much better than the one developed in the previous section! First, it uses only a couple of block-level elements to build the pertinent rounded corners, and second, the markup is semantically correct. In summary, you get the best of both worlds. However, I have to say that this code sample would be rather incomplete if I don’t show you the output that it produces, so here it is:

Okay, at this stage I've successfully implemented one of the multiple methods available today for creating simple rounded corners on web pages. But, what’s the point in doing such a thing if the topic has been covered many times before? Good question, indeed. In reality, the examples developed before were the unavoidable prelude to demonstrating that building the same nifty rounded corners with CSS3 is actually (and fortunately) much, much easier.

If you’ve reached this point, surely you’ll want to learn how CSS3 can assist you in this creation process, right? Well, you won’t be to disappointed, as in the following segment I’m going to reveal how simple it is to bring rounded corners to life, thanks to the new features packaged with the CSS3 specification.

Now, jump ahead and read the lines to come.

Next: Building rounded corners using the CSS3 specification >>