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:

Without a doubt, the best way to see if the rounded HTML container styled in the previous section will be displayed correctly by most WebKit and Mozilla-driven browsers is to define a sample web page that permits us to achieve this process in a painless manner. With that idea in mind, here’s an XHTML document that will let you perform the corresponding tests in a snap:

<!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 Mozilla and 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;

-moz-border-radius: 2em;

}

</style>

</head>

<body>

<h1>Rounded corners using the border-radius property in Mozilla and 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>

Well, as you’ll probably agree, the code of the above web page is so easy to follow that it doesn’t bear any further explanation. Anyway, if you feel curious and want to see if its rounded container is correctly rendered by the range of browsers mentioned before, just grab your machine, launch Firefox or Safari, and give the page a try. This is the output that I got when I tested the example in the former:

Of course, this is merely experimental, and for obvious reasons, not suitable to be used in production environments. Even so, all of the examples that you learned over the course of this series hopefully showed you how easy it is to build rounded corners with CSS3, no matter what approach you choose. On the other hand, how long the big contenders in the browser field will take to adopt the specification is a question that still remains unanswered. Time will tell.

Final thoughts

Finally, we’ve come to the end of the series. Overall, the journey has been educational, since I provided you with a quick overview of different approaches that can be used for rendering rounded corners with CSS3. Logically, the adoption of the new specification by most major browsers is still in its infancy, but keeping in touch with upcoming web design technologies is always a healthy exercise.

In the meantime, you may want to use Safari or Firefox and have a good time building rounded HTML elements by using the proprietary implementations of the standard “border-radius” property. Maybe it won’t be the next big thing that you can do as a web designer, but the experience will be instructive, believe me.

See you in the next web design tutorial!

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.