Using the Custom -moz-border-radius Property to Build Rounded Corners with CSS3

Rounded corners are, undoubtedly, one of the most engaging effects that have been used over the years for giving web pages a refreshing look without having to create heavy and complex background images. They're popular even though their tricky to implement, particularly when developing liquid layouts. Rounded corners have been very often overused or misused in the past, which has slightly decreased their well-deserved popularity.

However, the progressive support of CSS3 by most major browsers hopefully will bring rounded corners back to the privileged place they used to hold in the old days, as the brand new specification comes with some properties that will make creating this classic effect a very easy process.

To illustrate that building rounded containers with CSS3 is very simple, in the two parts previous to this one I explained how to apply this decorative effect to a single div, first by assigning multiple background images to it (a process known as multiple background layering), and second via the native “border-radius” property.

Frankly speaking, I have to admit that in both cases the development was a breeze to tackle, but unfortunately (at least for the moment) neither multiple layering nor the aforementioned “border-radius” property are supported by many modern browsers. Even so, not all is lost when it comes to building rounded corners using CSS3, as some Mozilla and WebKit-based browsers are capable of rendering them by means of a few proprietary implementations.

Therefore, in this third part of the series I’ll be showing you how to easily create rounded corners in Mozilla-driven browsers like Firefox using the “-moz-border-radius” custom property. This will let you learn the ins and outs of this process and get ready for the promising scenario that CSS3 has brought to the terrain of modern web design.

Now, let’s learn a few more interesting things about creating rounded corners with CSS3. Let’s get going!