English Deutsch Español Italiano Русский Svenska 日本語

CSS3 Border Radius Example

CSS Border Radius

CSS3 border radius parameter is a basic concept with vast possibilities. Put simply, it makes rectangular shapes in HTML smooth and round, with the ability to specify the properties of all the individual elements one by one or affect whole groups of them with a single line of code.


It had been quite the news ever since first versions of CSS3 were rolled out, and became one of the most discussed new features in CSS. Browsers had been launching versions with partial support of CSS3 border radius in 2011 and today most of them have mastered the trade of displaying rounded corners with the widest variety of additional settings.

For most Internet users and web designers, however, it had garnered a lot of attention and become a popular discussion topic online because it simply looks great! Users with different kinds of technical backgrounds and agenda had been creating special tables to compare the resulting look of different CSS3 border radius features in different browsers available at the time, concluding that most of the latest versions can boast nearly full compatibility of the acclaimed parameter.

The tables and comparison charts had also proved to be an excellent way of listing and keeping track of all the features that a CSS user can implement in their website’s code. Many webmasters had already gone through the exploring and learning process regarding CSS3 and made their Internet sites abide by the latest standard of style design.

The ability to create professional-looking rounded corners with CSS3 border radius will prove vital in the coming years as a way of ensuring a website’s friendliness and general appeal to first time visitors, regulars and paying customers. It is a bad idea to miss out on implementing these features in a future project, because doing so can potentially harm the chances of that project succeeding with the general public of Internet users.

The only reason for worry among web developers seems to be the way some browsers handle the new CSS3 features. While cutting-edge browsers such as Chrome, Safari, Firefox and Opera have already added near-perfect CSS3 compatibility to their latest versions, Internet Explorer seems to be lagging behind, as always, with only IE10 promising full CSS3 support in the future (whenever that is).

It might seem that all is lost and there is no way of including the amazing CSS3 border radius parameter in a website without jeopardizing its chances with the large number of IE9 users out there. While it is definitely true that the advanced features like CSS3 border radius will not be properly rendered on IE9 and other older browsers, all the necessary elements will still be displayed and retain their interactivity and functionality!

Yes, they will look bad on IE8 or IE9 (or only as bad as straight corners can make them look), but for the rest of the world, the site will look very professional and in line with all the latest developments of web design. In the end, to make the choice between moving up to CSS3 or staying with CSS2, it might be that each website owner must consider for themselves who their respective audience is and what browsers the majority of them use.

Download Free CSS 3 Border Radius Generator

Recent Templates