Blog

The Haycroft Media Blog covers all aspects of website design and development from the web browsers being used through to the standards that govern the world wide web. As a website design and development company, it is imperative that we keep abreast of all the latest news and happenings in our field, and here we present the major stories along with tutorials, tips and other web-programming related items.

CSS rounded corners for all browsers

Every now and then something new comes along that makes you wonder how you ever survived without it.

The ability to create rounded corners using CSS is just such a thing. There are clever javascript tricks for repositioning a circle image in the background, or there’s the old school method of creating an image for each corner, but, thank god, both methods can soon be relegated to the back of the css cupboard thanks to the introduction of the border-radius property.

The, still to be finalised, CSS3 method is as follows:
To round the lot: border-radius
To be specific:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

As this method isn’t finalised yet, Firefox, Safari and Chrome are making use of their own methods for the time being

Mozilla:
To round the lot: -moz-border-radius
To be specific:
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft

Safari / Chrome:
To round the lot: -webkit-border-radius
To be specific:
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius

So if you want to set a border-radius of 10 pixels to a div with the class ’rounded’:

div.rounded {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

Nb: border-radius: won’t have any effect for now, but we put it in there in anticipation of the glorious day when it will work across all browsers!

But what about the excellent Opera browser, and the many Internet Explorer browsers (complete with all their charming eccentricities that web developers love!) I hear you cry?

Well, nothing in CSS is THAT easy and so there is an inevitable hack.

First download this .htc solution: Curved Corner and add it to your site.

For example SITEURL/js/border-radius.htc

Then update the css as follows:

div.rounded {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior: url(css/border-radius.htc);
    border-radius: 10px;
}

For further tips take a look at Jon Raasch’s excellent post on CSS rounded corners (particularly the note on the path to the htc file and the section entitled “Hoops you have to jump through for IE:”).

Bear in mind that there are a lot of limitations with IE, so you may decide to ignore the hack and leave the site with square corners for browsers that don’t support the property as well as putting the champagne on ice (for now).

Edit: 31 March 2010: Opera 10.5 has now been released, including full border-radius support!

[ Back ]

2 Responses to CSS rounded corners for all browsers

  1. RetinaWeb says:

    You should also not forget that any thing with border-radius.htc you should put position: relative.unless there is already a position.

    and for best result use same border radius to all corners.

    and never use border-radius.htc with another IE hack.

  2. matt says:

    Thanks, and yes, all those factors need considering.
    I found more joy with CSS3 PIE on a more recent project: http://css3pie.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Facebook Comments

comments