STYLE SHEETS

Building Rounded Corners with CSS3`s -webkit-border-radius Property

In this penultimate part of the series I demonstrate how to build an engaging rounded corner effect on WebKit-based browsers via the custom “-webkit-border-radius” property. The entire styling process is very simple, so you shouldn’t have major problems implementing it within your own web pages.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 19, 2010

TABLE OF CONTENTS:

Just in case you still haven’t had the chance to read the preceding chapter of the series, where I explained how to render some appealing rounded corners on Mozilla-based browsers (including Firefox), below I reintroduced the example developed in that article. It shows how to accomplish this via the custom “-moz-border-radius” property. Here’s how this example looked:

<!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 –moz-border-radius property</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;

-moz-border-radius: 2em;

}

</style>

</head>

<body>

<h1> Rounded corners using the –moz-border-radius property</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>

As you can see, rendering a rounded HTML container with the proprietary “-moz-border-radius” property is a breeze, as the entire styling process is reduced to specifying either in relative or absolute units the radius that should be assigned to each corner of the container.

As with other proprietary CSS implementations, the major pitfall to using this approach is its incompatibility with browsers that don’t use the Mozilla rendering engine. Even so, if you feel adventurous and want to test the previous web page on Firefox, you should see on your screen a nicely rounded container similar to the one shown below:

So far, so good. At this stage, you surely have a spot-on idea of how to build rounded corners on Mozilla-based browsers, so it’s time to learn how to perform the same task when using WebKit-based browsers. As I said in the introduction, this can be accomplished with another custom property called “-webkit-border-radius.” The full details regarding its implementation will be discussed in the following segment.

To get there, click on the link that appears below and keep reading.

Next: Introducing the -webkit-border-radius property >>