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;
}
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;
}
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.
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, viaborder-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 
.
Comments
Post a Comment