There’s many ways to create rounded corners using CSS but with the introduction of CSS3, our lives as web designers are about to become a lot easier.
Up until recently I’ve been using my Rounded corners with one image method which does cut down on the amount of HTML and images required but when dealing with a lot of rounded corners the CSS can become a bit of a handful. But CSS2.1 didn’t have any alternatives so this was really the best solution to the rounded corners problem.
However, with CSS3 we can create rounded corners with a little bit of CSS.
margin: 20px auto;
This does currently only work in Mozilla and Webkit browsers (Firefox, Safari and Google Chrome) but does show the advantages of CSS3 which will be a huge welcome once Internet Explorer supports some of its features.
And here’s a quick example of how this could be put into practice:
As you should see, it works nicely in Safari, Firefox and partly in Google Chrome (which doesn’t seem to support the top rounded corners on the tabs) but also doesn’t break in Internet Explorer. When used correctly CSS3 can be used to progressively enhance a design but still be accessible within browsers which don’t support it.
So what do you think? Will you start using rounded CSS corners within your own work and client work at the moment or is Internet Explorer holding you back? Please feel free to leave any comments below.