The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
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.
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 -mozand -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.
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.
With all that out of the way, let’s get onto the demo and download:
Online Demo (via jsFiddle) Download Project Files