Building Rounded Corners with CSS3

Yes, we have to admit it: rounded corners are an old decorative effect that has been used (and overused) for years in web design. Their ubiquitous presence isn't going to vanish any time soon. Probably, the reason for their long reign has to do more with simple common sense that with any obscure scientific principle: rounded corners, in their different flavors, are attractive to human eyes and can be applied in a great variety of environments and contexts.

The dark side of rounded corners (if the phrase is really applicable) is that the process of implementing them on web pages is very often plagued with tricky twists. While currently there must be dozens of different approaches that permit developers to build rounded corners with relative ease, unfortunately many of them rely on JavaScript or non-semantic markup to create a realistic effect. Of course, there’s a valid justification for this vast proliferation of methods: CSS has lacked native support for rounded corners from the very beginning.

With the progressive adoption of the CSS3 specification by most browser vendors, however, things are hopefully going to change for the better in many fields, and this includes naturally the implementation of rounded corners. True to form, CSS3 comes with an exciting variety of brand new features that will make creating rounded corners a breeze -- and best of all, without having to appeal to client-side scripting or ugly browser hacks to get the job done.

The discouraging facet of this promising scenario is that some major browser manufacturers, like Microsoft, have been slow to add support for the CSS3 specification, as one might expect. In the meantime, though, it’s worth taking a close look at some methods that can be used for building rounded corners with CSS3, to give you a more accurate idea of how simple this process can be when using the specification’s new features.

Does my proposal look engaging enough for you? Then don’t hesitate; start reading!