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 of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

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 and the 'WebKit' ones in Safari and Chrome.

Each of the individual corner 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.

The Mozilla syntax before Firefox 3.5 only supported round (as opposed to elliptical) corners and adding a second value would result in a standard square corner.

The border-radius property in WebKit accepts one or two values and uses them to style all four corners making a nice symmetric shape. The new Firefox syntax allows you to define four different round or elliptical corners. A slash has been introduced to separate the horizontal and vertical length settings.

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.

The Mozilla properties used here do not conform to the standard (hence the -moz- prefix) and until Firefox 3.5 only support round (not elliptical) corners. In newer versions of Firefox elliptical corners are now possible.

As some people have pointed out 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 has supported elliptical rounded corners from the start:

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 -o-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.

Update: the latest public builds of Opera now support border-radius commands with no prefix. Whether that means the WebKit or the Mozilla syntax we're not yet sure.

WebKit special effects

As mentioned above, WebKit (Safari, iPhone) now supports a number of other CSS3 features, including the following effects and transforms.

Updated: Firefox now also supports an identical syntax for these effects - just replace -webkit with -moz for the effects, and use the Firefox shorthand from the next section for the rounded corners.

-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.

New Firefox short-hand properties

The following syntax is now working in FireFox 3.5 allowing you to specify not only elliptical corners, but even different elliptical corners in one shorthand property.

Here we've recreated two of the WebKit examples above using the new syntax. You can see that the individual corner settings work exactly the same now in Firefox as in WebKit, but for the short-hand property you need to include a slash:

And now to the scary part. Using the short-hand property, all valued before the slash apply to the horizontal radii and all values afterwards to the vertical. In this example we've created a hybrid of the previous two examples.

Here you can see what these boxes look like in Firefox 3.5:

Personally I'm not a big fan of these changes to the specification. It seems to be a bit a backside-covering for the Mozilla group so they can have all the new options without affecting anyone using their old syntax. If/when this is adopted anyone using the WebKit syntax (Example 8), which conformed to the original Working Draft, will suddenly end up with wonky boxes (Example 4).

Related Articles

• CSS: border-radius and -moz-border-radius
• CSS: Radial gradients syntax
• CSS: Linear gradients syntax

References

• CSS3 module: Border W3C Working Draft 7 November 2002
• CSS Backgrounds and Borders Module Level 3 W3C Working Draft 10 September 2008
• Surfin' Safari
• The CSS3 border-radius property

< CSS

Feedback and Questions

30 November 2007: Eric Naeseth says:

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

12 March 2008: 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.

9 October 2008: 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!)

13 December 2008: TJ says:

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

3 July 2009: oilyflutesalad says:

From the MDC: "Note: In Gecko 1.9.1 (Firefox 3.5), this property was updated to match the latest revision to the CSS3 specification for the border radius properties. Thus elliptical borders are now supported."

4 July 2009: lazarusgraveyard says:

Amazing! Im a fledgling and thought id cracked css. I was beginning to look at php when i started noticing sites with rounded corners that were not constructed by background images or .js - this post was incredibly illuminating to me - thanks!!

4 August 2009: Chris S says:

It all looks great, but for my clients any technique I use must work across all major browsers or it's simply not accepted. I suspect most commercial web work is like that. Like it or not IE is still by far the dominant player in browser usage. So while it's good to see and fun to play with, until Microsoft join the party (not likely just now) this will remain a hobby rather than a real working tool.

7 September 2009: Rolland says:

Very interesting and complete article, thanks.
Just to say that Google Chrome 2.* for PC support all the -webkit properties.

24 September 2009: Jerry says:

Thanks for the excellent summary of the border-radius CSS3 property. All the webkit extensions make me want to see CSS3 finalized and in widespread use.

I compiled a table comparing -moz- and -webkit- against the proposed CSS3 standard that might make a useful supplement to what you have done.

28 September 2009: Jerry Seeger says:

Another bit of good news: as of Firefox 3.5, -moz-box-shadow: and -moz-transform: work.

1 November 2009: Hindi Jokes says:

Great Article ! But on my website I am getting a CSS validation error i.e. Unknown Property 'border-radius' Declaration Dropped. Any Info on this one?

2 January 2010: Jorge says:

As of December 2009, there are public builds of the Opera browser (available in my.opera.com/desktopteam/blog/) that support border-radius, with no vendor prefix.