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’!
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.
Hopefully 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.
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.
Fun fact: Opera actually supported border-radius in version 10.5 (via -o-border-radius and -opera-border-radius), but now the current version 10.10 doesn’t support it. WTG Opera! I can’t help but think that Opera took the ’short bus’ when it went to high school. I mean it’s not like Opera is some big popular browser that can just not support whatever it pleases.
* Update – The current Opera release (10.10) and below don’t support border-radius but Opera 10.5, which is currently in “pre-alpha” will (and does) support it.
Fortunately, there’s a decent workaround for Opera 10.10. Opera supports 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. Hopefully one day IE will support border-radius, but until then this hack allows us to support it with only a few conditions. The Opera solution is a lot less “hacky” but comes with a different set of conditions (that you may consider ignoring due to its still relatively 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…