Using CSS3`s Border-Radius Property to Build Rounded Corners

If you’ve had the chance to take a peek at the CSS3 draft, you’ll have realized that the specification comes with a set of exciting new features that can make the lives of web designers much easier. Many of these make up a real breakthrough in the field of web design -- but the hard reality tells us, unfortunately, that their implementation by most browser vendors will be a very slow process.

However, this shouldn’t prevent you from learning what CSS3 can do for you in the (near?) future. Some of its features are already supported by a limited number of browsers, like FireFox and Safari, though in most cases through proprietary properties. What’s more, among its new capabilities, CSS3 can create rounded corners in simple and straightforward fashion. This is something that, with current techniques, can be done only by using multiple block-level HTML elements or JavaScript.

To start demonstrating how easy it is to build rounded corners with CSS3, in the article that preceded this one I went through the implementation of this classic effect by assigning four different background images (one per corner) to a single div. This process, described in the CSS3 specification as “multiple background graphic layering,” allowed us to create the pertinent corners without having to utilize different containers or even appealing to the functionality of JavaScript.

It’s fair to stress, however, that CSS3 makes it possible to build rounded corners in a more direct way than using the background image layering approach. Instead, we can use its handy “border-radius” property. If this topic has caught your attention, in this second part of the series I’ll be taking a close look at this method.

Now it’s time to start using the “border-radius” CSS3 property for taming those wild rounded corners. Let’s go!