STYLE SHEETS

Displaying Rounded Corners Built with CSS3 in a Wider Range of Browsers

Welcome to the last part of a five-part series that explains how to build rounded corners with CSS3. In this part you'll learn how to use two properties discussed in previous articles in the series together. In this way, a wider variety of browsers will render your rounded corners correctly.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 22, 2010

TABLE OF CONTENTS:

In the introduction, I made reference to the example developed in the preceding part of the series, where I demonstrated how to create a rudimentary rounded container by means of the custom “-webkit-border-radius” property. Obviously this property is recognized by most WebKit-based browsers. If you haven’t had opportunity to read the pertinent article, below I included the corresponding example, so you can examine it in detail and grasp its underlying logic. Here it is:

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

<head>

<title>Rounded corners using the border-radius property in WebKit-based browsers</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;

padding: 20px;

background-color: #39f;

-webkit-border-radius: 2em;

}

</style>

</head>

<body>

<h1>Rounded corners using the border-radius property in WebKit-based browsers</h1>

</div>

<h2>Main content section</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. Etiammassalibero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

From the above code sample, it’s clear to see that using the custom “-webkit-border-radius” property is nearly identical to working with the standard “border-radius” included in the CSS3 specification. In this case, the entire decorative process is limited to specifying individually (or in one go) the radius that each rounded corner must have within the target HTML element and nothing else. It’s that simple, really.

Now, join me in the following mental exercise: what would happen if I’d also assign to the previous rounded container the “-moz-border-radius” property? Yes, you guessed right! In doing so, the element would be rendered correctly not only by WebKit-based browsers, but by those using the Mozilla rendering engine. It’s a poor consolation, I know, but this would make the earlier example compatible with more of the browsers out there.

The exercise is certainly worth trying, at least for demonstrative purposes. So, in the following segment I’ll be amending the set of CSS styles defined before, thus extending its current compatibility.

Now, click on the link that appears below and keep reading.

Next: Rendering rounded corners in a wider range of browsers >>