Dave Woods - Freelance Web Design Warwickshire

CSS3: Rounded CSS Corners

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.

#container {
width: 840px;
margin: 20px auto;
background: #fff;
padding: 30px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

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.

For those people that want it to look identical in all browsers though, there are work arounds and you could apply the rounded corners to Internet Explorer using JavaScript which I’ll cover in my next tutorial.

Summary

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.

5 comments on “CSS3: Rounded CSS Corners

  1. Phil Thompson

    I’ve tentatively started using this technique in commercial projects but, unfortunately in most scanerios it’s just not ready and the big reason is IE7/IE8’s lack of support.

    Therefore I find myself using border-radius in my default stylesheet then having an IE stylesheet which uses background images or sometimes using a JavaScript fallback (DD_roundies is a good ‘un). Often, JavaScript solutions just aren’t good enough for commerical work because they load too slowly or have glitches in the odd layout and having these separate solutions, to be honest, feels dirty and wrong.

    We can only hope IE9 supports border-radius and that people actually download and install it. Sadly, neither is likely

  2. Dave Post author

    Hi Phil, yeah I completely agree. For personal projects I will use border-radius (for example, http://unitedonline.co.uk/) as it doesn’t bother me too much if IE users don’t get them… it’s still usable and accessible.

    But I do agree that for commercial projects where clients are intent on pixel perfect cross browser designs that it probably isn’t the solution just yet sadly.

    I’ll be having a look at JavaScript solutions for IE next week though so hopefully there will be a decent solution out there.

  3. Pingback: Dave Woods - Freelance Web Designer UK » Rounded Corners in Internet Explorer

  4. Jobs

    The CSS3 rounded corner feature is a great addition but as long as there’s still IE6-8 floating around on people’s computers, I think designers would still always have to use the background image technque.

    May be we’ll all have to wait another 5 years until all IE6-8 browsers have been upgraded and then we’ll be able to fully switch over and can just use this new CSS3 feature?

  5. Pingback: Rounded Corners in Internet Explorer Using JQuery | php opensource knowledge base