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

Even though many major browsers most likely won’t support it any time soon, CSS3 will introduce -- sooner or later -- a significant evolution (not a revolution) in the way that websites are developed. Packaged with a great variety of enhanced and brand new features, the specification will allow developers to implement all sorts of clever things on web pages, ranging from using the so-called behavioral CSS, to working with div-based tables, to name just a few.

Among the exciting features that CSS3 offers for free, there are a couple that deserve a closer look. They're useful for building rounded corners without having to deal with annoying and non-semantic markup or even appealing to the functionality of JavaScript. In this particular case, I’m talking about the “background” and “border-radius” properties, which let you add this decorative effect to any element of an (X)HTML document in a snap.

To illustrate how useful these CSS3 properties can be, in previous tutorials of this series I developed some basic examples that showed how to create a rounded HTML container, first by assigning four different background images to it (a process also known as multiple background image layering), and second via the handy “border-radius” property.

Unfortunately, the property works remarkably well in theory, but in reality it still suffers from lack of native support by some of the most popular browsers, so for the moment its functionality should be analyzed only from a theoretical point of view. A direct consequence of this is that different browser vendors have implemented custom versions of the property, which do allow you to render rounded corners very easily, but not in a truly standard way.

In fact, I've already demonstrated how to build rounded corners on Mozilla-based browsers via the proprietary “-moz-border-radius” property, but it’s also feasible to produce similar results on WebKit-driven browsers by means of another custom implementation, not surprisingly called “-webkit-border-radius.” Therefore, in this penultimate installment of the series I’ll be discussing in detail how to work with the aforementioned property, which will be a straightforward process.

Now, let’s explore this approach to building rounded corners with CSS3. Let’s jump in!