aDevelopersNotebook

One of the most keenly-anticipated CSS3 properties isborder-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.

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

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

3. 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; borderbackground 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.

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

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

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