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:

Building rounded corners with CSS3 is a very simple process that can be tackled by means of different approaches, which will be discussed in depth in the course of this series. However, due to the limited support offered by most modern browsers for the new CSS specification, for the moment the task must be performed using more “traditional” techniques.

As mentioned in the introduction, there’s a huge arsenal of methods that will let you create rounded corners using either CSS or JavaScript (or a combination of both). But for demonstration purposes, I’m going to implement this classic effect using a few nested divs and four different background images, one per corner being decorated. Here are the images in question:

Considering that at the present time CSS permits you to assign only a single background image to an HTML element, adding four rounded corners to a sample container will require you to code four nested divs as well. The following example shows how to accomplish this:

<!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 four 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;

}

div.rounded_container {

width: 400px;

background: #39f url("tl.gif") top left no-repeat;

}

.rounded_container div {

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

}

.rounded_container div div {

background: transparent url("bl.gif") bottom left no-repeat;

}

.rounded_container div div div {

background: transparent url("br.gif") bottom right no-repeat;

}

.rounded_container div div div div {

padding: 10px;

}

</style>

</head>

<body>

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

</div>

<h2>Main content section</h2>

<div>

<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>

Even to the eyes of a beginner, it’s clear to see that the previous example is a serious case of divitis (or divosis, if you want to cause a stronger impression between your friends and colleagues). Obviously, the same effect could be achieved by using a pinch of JavaScript and a single HTML container, but keep in mind that this is only a quick reminder of how tricky rounded corners can be even at present.

In addition, the following screen capture shows the output generated by the earlier web page. Check it out:

Well, the rounded corners are finally there, but the hassles of building them are not really worth it. This approach is mostly used with liquid designs, and usually it’s implemented via JavaScript, which allows you to quickly dispose of the non-semantic divs. It’s feasible, however, to create rounded corners with CSS without sacrificing the markup’s cleanness. Thus, right before I show you how to get the same results in a snap with CSS3, I’m going to implement another rounded corner method, which will use fewer divs than the approach that you just saw.

To learn the full details of this enhanced CSS method, click on the link below and read the section to come.

Next: Creating rounded corners using fewer divs >>