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:

If you’re a strong fan of Safari or other WebKit-based browser, then the following web page should be quite appealing to you. It will render an engaging rounded container, thanks to the functionality provided by the “-webkit-border-radius” property discussed in the preceding section. Take a look at it, please:

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

Mission accomplished. At this point, armed with the material distilled in this and previous tutorials of the series, you’ll be able to decorate your HTML elements with some nifty rounded corners, as long as you don’t use Internet Explorer, in all its versions.

This might lead you to think that Microsoft’s browser is again the bad kid on the block, as it has been for years in the past, but it’s fair to say that other famous players, like Firefox, also come up short when rendering rounded corners according to the standard CSS3 specification. Quite possibly, we’re expecting too much from them. Who knows?

Final thoughts

That’s all for now. In this penultimate chapter of the series I demonstrated how to build an engaging rounded corner effect on WebKit-based browsers via the custom “-webkit-border-radius” property. As you saw for yourself, the entire styling process was really simple, so you shouldn’t have major problems implementing it within your own web pages.

So far, I showed how to create rounded corners in browsers using different rendering engines, which sadly goes against the pattern of what a web standard specification should be. Even so, it’s possible to reduce -- at least to some extent -- the current browser incompatibilities and create rounded corners that will work in WebKit and Mozilla-based browsers at the same time.

But, how can this be done easily? Yes, you guessed right! Simultaneously assigning the two custom “border-radius” properties that you learned before to the same HTML element will do the trick. However, the details of this concrete implementation will be covered in the last part of the series. Don’t miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.