In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites.
While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be comfortable with this design enhancement falling off for IE users.
But wouldn’t it be great if IE users could see the better version of the page? Fortunately there are cross-browser hacks for the more common CSS3 attributes. These hacks not only allow CSS3 attributes to work in all browsers, but in turn allow designers and developers to use CSS3 in the central styling of their sites.
In this article we’ll walk through getting rounded corners working in all browsers. Firefox, Safari and Chrome are easy with the border-radius property, but we’ll have to jump through some extra hoops to get it working in IE and Opera.
After only a few compromises, we will have CSS rounded corners working in all browsers, and without using any images. Welcome to the ‘No Image UI Club’!
Update – With Opera 10.5, we no longer have to jump through any hoops at all! Details below
The easy part – Firefox, Safari & Chrome
It’s best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let’s apply a border-radius of 20 pixels to everything with the class ’rounded-corners’:
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
The first thing you might notice is that we defined the border-radius four times over. This is because current browser implementations aren’t completely refined according to W3C’s recommendations. Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as -moz and -webkit.
In our example, -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers. Finally, the plain, old border-radius is future-proofing for whenever browsers properly support this attribute.
Applying border-radius here will round all the corners of the element, but you can also round certain corners and not others, or even use elliptical as opposed to perfectly round corners. Read this CSS-Tricks article for more info.
Rounded Corners in IE
None of the IEs support border-radius, not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius.
Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.
Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.
First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:
.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}
The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.
That’s why it’s a good idea to avoid relative paths like we did above.
Hoops you have to jump through for IE:
- Any element with this hack needs to have position, so unless it already has a position, attach
position: relative. - It can act funny on some elements that are natively inline, even if you attach
display: block, although not all the time (fun!). - It also has issues with elements that don’t ‘have layout’. Attach
zoom: 1;to get around this. - You can only use this on elements with the same border radius applied to all their corners.
- When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
- Don’t even think about combining this with another IE hack, such as a box-shadow filter hack.
Additionally, if you try to use this hack dynamically with CSS or Javascript effects, it will give you problems if the element either doesn’t exist or has display: none or visibility: hidden (basically if it isn’t rendered on the page). With JS, you can apply the behavior: url(/css/border-radius.htc) via Javascript after you append the element to the page. When using a CSS effect like :hover, you’ll have to find a more creative way of hiding the content, such as overflow: hidden or z-index: -1; hiding an element like this will still cause the browser to render it, even if it isn’t visible to the user.
Unfortunately there are still certain drawbacks to using this hack with dynamic content, for instance there’s a flicker when changing the background color of an element with Javascript, and I haven’t found a way to change it at all using CSS’s :hover.
Another IE option:
You might also think about trying this method, although it seems more complicated to me.
Update – IE9
A few weeks ago at MIX10, Microsoft announced IE9, and it seems like they may have finally gotten a few things right. Of particular interest is IE9′s support of CSS rounded corners, which actually surpasses the support of all other browsers. See here.
Making it work in Opera
Opera has gotten its market share up over 2% so I’m officially supporting it, and I think you should too.
Update – Opera 10.5
Opera 10.5 has been officially released for Windows, and will be on the way shortly for Mac. I’ve always been a bit skeptical of Opera as a viable browser, but this new version really changed my mind. Besides being extremely peppy, Opera 10.5 supports a wide variety of CSS3 properties, including CSS rounded corners, via border-radius (that’s right, no prefix).
If Opera doesn’t need a prefix (e.g. -opera-border-radius or -o-border-radius), then that should mean that they are supporting border radius according to w3c’s specifications. However I haven’t been able to find anything to confirm this.
Workaround for Opera 10.10 and below
Additionally, there’s a decent workaround for Opera 10.10 and below. Since version 9, Opera has supported SVG generated images, which are actually super cool. This allows you to draw images using CSS and an encoded SVG string. Don’t worry, you don’t actually have to write it; here’s a really handy round corner generator for Opera. This generator will allow you to build the CSS SVG output you need to support border-radius.
The Opera method is a little more robust than the IE hack, in that it supports rounding only certain corners of an element, and can also be easily used dynamically with CSS and Javascript effects.
The downsides are that it can only be used with block colors for whatever has the rounded corners, and whatever it is sitting on. This means that you can’t use it over anything textured or semi-transparent. Additionally, this method causes a brief flicker while it loads up, which is mostly noticeable when using it dynamically.
Finally, the Opera method is a little annoying to use, since you have to generate new CSS output for every color combination.
In Summary
These methods allow developers to support CSS rounded corners in all major browsers. As of IE9, IE will support border-radius, but until then this hack allows us to support it with only a few conditions (and for all the losers still on IE6). Opera has already implemented border-radius support since this article was written, but for versions prior to 10.5, the Opera SVG hack works well enough. (You may consider ignoring legacy support for Opera, due to its low market share.)
Although I wouldn’t necessarily recommend these hacks for a client’s site, they are pretty fun to play around with, and I ended up using them all over jonraasch.com. Combining this with some box-shadow and this CSS triangle trick, I was able to make it so that the only image assets my site loads are its background, logo and various content images. And I think that’s pretty cool 
.
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Wow your a life saver! thanks so much!
Nice article
Isn’t Opera 10.5 the current beta, and 10.10 the current release?
Wow, excellent tutorial… I’m off to practice!
wow!! this is super great!!!! thanks
Yeap, this one is a killer. Css3 will be a fun little toy for me, lots of creative inputs, but The browsers need to pick up the css3 much faster!
Brilliant, hope this works better than curvycorners, just insane why browsers don’t make this uniform as it’s such a useful feature.
Opera 10.5 is a future update I believe. Like when Firefox jumped from 3.0 to 3.5. Opera 10.10 is an upgrade from the current Opera 10. I know it’s shitty numbering, but hey … it’s Opera :p
great thx 4 sharing
Nice article, thanks!
The Opera solution seems to have even more limits than the one for IE. I don’t think a site wouldn’t be “supporting Opera” if it showed normal corners to the visitor. How important can rounded corners be for the site?
Nice tutorial, but strictly speaking this isn’t CSS rounded corners in all browsers, as the .htc relies on javascript, so if you have it turned off you won’t see them…
Leave ie6 alone. Let him die in peace.
What about Curvy Corners? It also has some small bugs but it will autmatically figure out of there is used any -moz-border-radius and round the corners.
Wow, I hadn’t even realized Opera stopped support for it with their latest update. I had also been under the impression that they had adopted border-radius versus using a prefix? According to their dev blog they had always used border-radius sans prefix (http://dev.opera.com/articles/view/css3-border-background-boxshadow/). You might have to view through Google’s cache because it seems to be down right now.
Anyway I just did a little digging around to check and it shows that it still supports border-radius for 10.10. http://www.opera.com/docs/specs/presto22/css/properties/.
Where did you read that Opera dropped support for it?
Sorry for the double comment; Decided to upgrade to 10.10 and low and behold. That’s a big move to have dropped that support.
Poor Opera users will have to deal with pointy corners; I hate using alternatives just for other browsers. I let it downgrade instead.
BRAVO JOHN, BRAVO.
In my blog Gtricks I have to hatefully switch from rounded corners to rectangular boxes since it wasnt supported well everywhere and hence it wasn’t giving a same uniform feeling to users on all browsers.
IE8 has done henious crime for not implementing rounded corners.
Really great article. overcomes some IE pitfalls
@daniel15 + @Niels Matthijs – Yeah I was just baffled as to why they would remove the support, but what you’re saying makes more sense, that 10.5 is the beta and 10.10 the current release (really confusing versioning tho…)
@snlr – The nice thing about the Opera hack is that it supports rounding some corners and not others, which is something I use often, and it additionally works better dynamically. But yeah it’s way more annoying to use.
@ben – Good point on .htc using Javascript, but I stand by my catchy title
@jordan – My mistake, 10.5 is a ‘pre-release alpha’ and 10.10 is the current release. Kooky version numbers… Out of curiosity, have you gotten any of those properties to work with Opera sans-prefix?
@Romi – Amen brother!
“10.5 is the beta and 10.10 the current release (really confusing versioning tho…)”
How is this confusing? 10.5 (10.50) is greater than 10.10.
@c. – IMO version numbers shouldn’t be treated like decimals. 10.5 should be followed by 10.6, 10.7, and then 10.10, 10.11, etc. Otherwise you’re forced to jump to version 11 after 10.9, even if it doesn’t make sense.
This version should be numbered 10.1.0 if that’s what they’re going for.
And if they should be treated like decimals, wouldn’t you reduce 10.10 to 10.1?
Microsoft and Opera can build better browsers and more importantly their users can get better browsers. No hacks. They can have a square look.
I’m having some issue with this hack. I have a background image (w/ placement) but when I use this hack it automatically repeats the whole image.
How can I get around it?
IE9 supports border-radius in the same fashion as Opera 10.5
http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx
Half of the comments mentions Opera, that wouldn’t happen even an year ago… it’s a good thing. Opera 10.5 will be out by march, with a new render engine that supports rounded corners. The alpha is very usable and by far the best version of this browser.
Thanks for clarifying on the versions there! I’ll have to revert back to the alpha release to double check. Truthfully, I never actually *looked* to see the support. Rather I added the support sans prefix due to numerous articles announcing Opera actually using prefexless border-radius and having seen it’s support on their site.
I’ll let you know
thanks for the info… it helps me a lot
Too bad it doesnt work in ie6, the most saturate browser in the market.
@christoff – The .htc hack described above works just fine in IE6, I’ve actually had more trouble with it in IE8 than in IE6 if you can believe that. Also IE6 is by no means the most widely used browser on the market. See these stats
Just seems like too much work to add 5-6 CSS methods to get rounded corners. I may just stick with the image corners. Good post though. Good things to know. Ugh IE
Nice post and really useful! Thanks for the sharing!
I don’t understood because there are people that use today IE… when there are other browser that are better
Looking at your site in IE8, the Home, Portfolio, About, etc tabs have rounded tops, and square bottoms. If the border-radius.htc doesn’t support specifying the radius for each corner, how do you accomplish this on your site for IE8?
@Carlos – Yeah it’s a pain to implement, but in terms of filesize and load time you’re better off with the hacks. Provided you can deal with all the compromises they entail.
@Echoweb – I know it sucks that people use IE6 but think of it as a challenge
.
@JoshuaW – Hehe good question. To get the bottom corners square in IE, I used
overflow:hiddenon a wrapper div, then absolutely positioned the tab so that the rounded border rendered outside of the wrapper.that picture of Bill Gates… HAHAHAHHA
Thanks for the tutorial, and thanks for the laugh, it was so appropriate.
Pretty much I’ve decided, screw IE, people won’t get the full experience if they insist on using it. /not using the hack.
@tinos Hah yeah I was really proud of that pic of Gates & Ballmer, but it totally flopped on 4chan a few months back. Glad you like it
.
Hi,
Great site loads of information for a newbee. Your round corners tut is great but I a using DNN 5 and have tried to implement on this page http://www.kidfit.com.au/test.aspx. Works well for firefox but not IE. Have I done this right
code:
.block {
height: 550px;
margin-right: 10px;
padding: 20px;
background: #ccc;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
#behavior: url('border-radius.htc');/* override for Microsoft Internet Explorer browsers*/
#border-radius: 15px;/* override for Microsoft Internet Explorer browsers*/
}
Any help would be appreciated.
Kind regards,
Buck
cool solution there mate!!, it has been some time I’m looking around something like this one, thanks for sharing…
How does one do individual corners with this solution in IE6+? Say I just wanted to do the top corners in order to create a “tab” feel to the element, border-top-right-radius, border-top-left-radius didn’t work…
Thanks!
Thanks for this tutorial. Everythings works fine, even in IE. Except for one thing: when I resize font in IE the layout breaks. A refresh makes it all alright again but ofcourse that’s not what I’m looking for.
I’ve tried to give the div with the class position:relative; but to no avail. Also zoom:1; doesn’t make it right.
Any ideas?
Thanks,
Sandra
Just use a bloody image. Workin every broswer and device and involves no dicking around. After 15 years of web design I am sick to death of hacks and alphas and workarounds. Just do what is simple and move on.
Thanks for such straightforward info. My question now tho is, how do you make rounded corners EASILY on form fields? I see some examples online, but most involve Javascript. Any tips on doing that in all CSS?
Great stuff, thanks – images are no good for flexible width layouts with patterned background, so this is extremely helpful. Works perfectly.
Same question as Marco above…what’s the best solution for IE to get rounded corners only on certain corners?
A nice clean, well explained and clearly detailed answer to the gnawing CSS rounded corners issue. Thanks!
how about using css2?
Wow.this is awsome.
but i do have this problem.I tried it on a joomla project & it seems not to work on IE.I have done the styling on the template’s css & uploaded the .htc doc on the css directory.The code is exactly the same as yours exept for the colors.What is it that am doing wrong pliz!
Thanks Jon I’ve been banging at this for awhile and your article brought all the elements together to solve this problem easily.
To answer Joe and a few others who are having IE issues – the .htc solution is wonky at best I had to work at it for a bit to get it to display rounded corners consistently.
As to controlling individual rounded corners of different sizes as Jon said the .htc isn’t going to help you there as all corners have to be the same.
Take a look at Jons “hoops you have to jump through” for IE section of this article, everything he posted there should get you to 4 rounded corners.
Thanks for the clear summary Jon – it worked a treat for me.
Thanx Rolande.I got it working now in both IE, Firefox, Safari & even some other browsere.Thnx alot Jon & all of you for this.I’ll have to show this to my friends cz most of them still don’t knw this technique, they still use images for the rounded corners.Thnx once again!
Thanks for this, Jon!
Had some fun rounding things off on my little site – helped in great part by this very useful post.
Best,
Alex
Thank you so much for this detailed article on the topic.
I was reading so many others on the web, but none of them could help me to achieve the round corners in IE, as it was the first time I try did, and they didn’t explain as deep as you do in your article.
Now I successfully have rounded corners on IE in my site.
Happy coding!
it is wonderful tutorial
I’m calling the .htc file with an absolute path in an IE hack sheet but it knocks out the div background colours. I think it’s down to inline inheritance, but display block, position relative and zoom don’t make a difference.
Same thing here. When I call .htc file with an absolute path, my background disappears in IE. I wonder if this is somehow connected with transparency I’m using in my background image… But when path to .htc file is relative nothing happens at all – just square corners in IE.
thx, great article
is there an online demo for testing?
I really liked this one. and in future i really like to visit this site again for thsese kind of tips
Jeebus H Crisco hasnt the browser world resolved this yet? I leave web development for a couple of years, expecting ridiculous issues like this to clear themselves up, and all I get for my wait is a whole lotta nuthin. At least IE6 is dead, right? RIGHT?
I like your website, but by far my favorite thing is your “pantsless” easter egg.
Thanks for the help. Seeya.
PS: Why cant I put single quotes in this comment space???
Thank you so much Jon. Keep it up the good work.
Hello
IE8 doesnt like this hack !
The solution is using this attribute to Parents element : position: relative; z-index 0;
Thanks for your blog…
Serge
Very nice CSS trick! I will be using this in a lot more projects. I did run in to a weird IE bug though. I use a js function to fade border/font/bgcolor style of some newly rounded buttons and it becomes a ‘not round’ div again. Does anyone have a javascript or css fix for this issue?
This saved me SO much time! Thank you!!
This is great but I had a lot of trouble with IE8 often not rounding the corners even though the htc file was being loaded.
The Solution (this has now been confirmed on 3 sites amending existing css).
Add a dummy empty rounded corner div just after the Body tag:
/* Rounded corners – All browsers */
.rounded-corners {
background-color: #ECE9D8; – match to your background
width: 900px; – match to your width
height: 0px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
behavior: url(css/border-radius.htc);
}
It seems that if the htc file is applied to an empty (clean) div, IE is then much more happy with applying the htc to subsequent divs and elements.
If am using drupal, how will the path to the htc file be used?
I copied it to my site in a folder with path similar to:
/www/sites/mysite.com/themes/garland/
where the htc file is stored in the garland folder.
what path do i need to use in the css: behavior(path to htc) as u mentioned :
“this path is relative to the page from which you call the CSS”, but drupal store its pages in a db instead of in folders…?
kool stuff Jon!