CSS: border-radius and -moz-border-radius

One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners.

While Internet Explorer doesn't support many (or any) advanced CSS properties, you can get started using Firefox and any of the 'Mozilla' family of browsers. Apple's WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.

Definition and syntax for border-radius

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each attribute is mean to accept either one or two values, but the Mozilla implementation is slightly different from the standard as you'll see below.

Here are the CSS and browser-specific attributes in question:

At this time the CSS3 properties above do not work in Internet Explorer. The 'Mozilla' versions however work perfectly well in Firefox and other Mozilla-based browsers.

Each of the CSS3 properties take either one or two length values (generally 'px' or 'em' values). If a single value is supplied then that becomes the radius of a rounded corner. If two values are supplied then they become the horizontal and vertical radii for an elliptical corner, but this only works in WebKit.

The Mozilla syntax only supports round (as opposed to elliptical) corners and adding a second value will result in a standard square corner. You can see this in the examples presented below.

Examples using -moz-border-radius

The following examples will only work if you're using Firefox or another Mozilla browser that supports -moz-border-radius properties.

Unfortunately that's about the limit of what we can do with border-radius until the final CSS3 specification is implemented. The Mozilla properties used here do not conform to the standard (hence the -moz- prefix) and they only support round (not elliptical) corners.

Note: These properties can be used not just for 'boxes' but for many other HTML objects including form elements.

For those of you still seeing square corners, here's a snapshot from Firefox showing the rounded corners effect:

There are a number of tricky JavaScript solutions that allow border-radius and other CSS3 properties to be seen in Internet Explorer and other browsers - but the overheads don't really justify the results.

Support for -webkit-border-radius in Safari (Webkit)

The latest versions of Safari now support -webkit-border-radius. Previously only the 'nightly builds' contained this functionality.

(You can download nightly builds of WebKit from http://nightly.webkit.org/ (Mac or Windows) which will give you an application called WebKit - essentially the latest development version of Safari's rendering engine).

WebKit supports elliptical rounded corners, which Firefox does not, as shown here:

For those of you still seeing square corners, here's a snapshot from WebKit showing the rounded corners effect. Note particularly the change in syntax and the effect of passing two values to -webkit-border-radius as compared to the -moz-border-radius example above:

WebKit also has limited support for other CSS3 border properties such as: multiple backgrounds; border background images; and various advanced selectors (::select for example) making it a great test platform for forward-looking developers. Stay tuned to the Surfin' Safari blog linked below for the latest exciting developments.

Support in other browsers

There have been rumours of an -opera-border-radius and -khtml-border-radius to work respectively in Opera and KHTML browsers, but at this stage they seem to be just rumours. Internet Explorer of course has no support for the rounded corners css properites.

WebKit special effects

As mentioned above, WebKit (Safari, iPhone) now supports a number of other CSS3 features, including:

-webkit-box-shadow

Clearly there are still some anti-aliasing problems, but for corners and gentle curves it can look pretty cool.

Then there are various -webkit-tranform option that can be used to create all kinds of wierd and wonderful shapes:

-webkit-transform: rotate()

-webkit-transform: skew()

For the browser-impaired here is a screenshot from Safari showing the effect of these WebKit-specific CSS rules. There is currently no equivalent in Firefox or other browsers:

Also in Safari these and other transformations can be implemented as animations using just CSS effects triggered by hovering over an element - so no JavaScript.

References

• CSS3 module: Border
• Surfin' Safari

< Back to CSS

Feedback and Questions

2007-11-30: Eric Naeseth says:

Great article. You may want to update it to say that, as of Safari 3, the -webkit-* properties are supported.

Thanks, and yes, Safari 3 now supports rounded corners, box shadows and a bunch of other -webkit properties by default. I believe they're also supported on the iPhone and other mobile devices running WebKit.

2008-03-12: Art Geigel (Omniasoft WebDev, Inc.) says:

The rounding effect is really nice and handy to have. 2 things I think might be important to point out: 1) that the border radius can still be applied to an object that doesn't have a border attribute, and 2) that even though rounding can now be handled by the browser it does not anti-alias the edges of the corners against the background - and some hardcore web interface users will still want to use their graphical corners to achieve this effect.

Thanks for pointing that out Art The edges are already much much nicer in Safari than Firefox so hopefully this is only a temporary constraint.

2008-10-09: Chris says:

Update: As of October 2008 the rounded corners in both Safari 3 and Firefox 3 are antialiased. Come on Microsoft, support border radius in IE8! (or 9? or 10?! Please!)

2008-12-13: TJ says:

A little layering and play with the opacity and you can get some pretty cool effects with this.

2009-01-23: Laurent says:

The two values for horizontal & vertical radii, is now supported by Firefox 3.05.

It doesn't seem to be working in my version - 3.0.5 (Mac)