Displaying Rounded Corners Built with CSS3 in a Wider Range of Browsers
(Page 1 of 4 )
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.
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.
Next: Review: rendering rounded corners in WebKit-based browsers >>
More Style Sheets Articles
More By Alejandro Gervasio
