CSS: border-radius for FF ,Ghrome, IE9 , Opera , Safari

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.

CSS3 (Opera browser)	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

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.

-moz-border-radius: 1em;

-moz-border-radius-topright: 2em;
-moz-border-radius-topleft: 2em;

-moz-border-radius: 2em 0;

-moz-border-radius: 3em 1em;

The Mozilla properties used
here do not conform to the standard (hence the -moz-
prefix) and until Firefox 3.5 only supported round corners. In newer
versions of Firefox elliptical corners are also 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 In Opera the syntax for the corners is the
same as in Safari, but the behaviour of border-radius with two
values matches that of Firefox, as seen in Example #7 below:

-webkit-border-radius: 1em;

-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;

-webkit-border-radius: 24px 0;

-webkit-border-radius: 36px 12px;

-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;

For those of you still
seeing square corners, below you can find asnapshot 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.

4. Support in other browsers

Opera, and now Safari (Mac), will support border-radius
properties without any prefix. Internet Explorer, at least up to
version 8, has no support for the rounded corners css properties.

5. Other special effects

WebKit, Firefox and Opera now support a number of other CSS3
features, including the following simple effects and transforms.
Thankfully, unlike rounded corners, for the shadows and transforms there
does seem to be agreement on a common syntax.

-webkit-box-shadow

-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

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-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: rotate(-5deg);

-webkit-transform: skew()

-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(5deg,5deg);

For the browser-impaired
here is a screenshot from Safari showing the effect of these CSS rules.
The same effects are now possible in Firefox, Opera and related
browsers. Just replace -webkit with -moz or
-o, except for border-radius and box-shadow
where Opera uses no prefix.

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

6. New short-hand properties

The following syntax is now working in Firefox and Opera allowing you
to specify not only matching elliptical corners, but also 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:

-moz-border-radius: 36px / 12px;
border-radius: 36px / 12px;
-moz-border-radius-topright: 50px 30px;
-moz-border-radius-bottomright: 50px 30px;

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.

-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

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

7. Related Articles

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