Displaying Rounded Corners Built with CSS3 in a Wider Range of Browsers

Among the variety of improved and enhanced features that come with the CSS3 specification, its “background” and “border-radius” properties will definitely be of interest to you. When they're implemented in a clever way, they allow you to build engaging rounded corners on web pages without having to deal with multiple block-level HTML elements or even use a pinch of JavaScript.

Not all is beautiful and pleasant, however, when it comes to utilizing these properties with many modern browsers. Such browsers currently offer little or no support for the properties, which is obviously an annoying and frustrating issue. But, does this mean that you’ll have to give up and keep on creating your rounded corners using one of the dozens of “traditional” approaches that exist today?

Well, some Mozilla and WebKit-based browsers do provide decent support for the standard “border-radius” property, even though it's via some proprietary implementations that can be tested on Safari and Firefox, among others.

In fact, in the last two tutorials I discussed how to create basic rounded HTML containers on WebKit and Mozilla-driven browsers by using the custom “-webkit-border-radius” and “-moz-border-radius” properties respectively. This was a simple process, but we can improve on it to some extent if the corresponding properties are assigned simultaneously to the same target element. This would make it possible to render rounded corners on a wider range of browsers.

Therefore, this final installment of the series will be focused on demonstrating how to implement the previous approach, thus finishing this humble introduction to  building rounded corners with CSS3. Now, let's dig in to our topic.