border-radius: Safari vs Mozilla

Warning This article was written over six months ago, and may contain outdated information.

With the release of Safari 3, there are now two browsers with (browser-specific) implementations of border-radius; unfortunately, the two implementations are different. The problem is that there is an unresolved ambiguity in the CSS 3 working draft.

The draft proposes four declarations, which describe the four corners of a block:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Each of them should accept two values, which define the radii of a quarter ellipse that defines the shape of the corner; this allows for irregular curves (take a look at the diagram in the draft if you need clarification, or see this example of a box with border-radius: 5px 20px, horribly rendered in Safari for Windows).

Safari, with the prefix -webkit-, accepts these. Mozilla, with the prefix -moz- (and differing declarations), accepts only a single value and, therefore, only regular curves.

At first glance, it would appear that Mozilla are in the wrong; however, their implementation is due to the ambiguity I mentioned earlier.

This ambiguity comes about in the border-radius shorthand property; if you enter a double value in this you’d expect to apply the irregular curves to all four corners:

border-radius: 5px 10px;

If you wanted to have four different irregular curves on the box, you’d have to provide eight values to the declaration:

border-radius: 5px 20px 10px 5px 10px 20px 20px 5px;

But what if you wanted to have two corners with one value, and two corners with a different value?

border-radius: 5px 10px 10px 20px;

The problem is that this could be confused for four corners with regular curves. In order to get around this, you’d still have to provide eight values:

border-radius: 5px 5px 10px 10px 10px 10px 20px 20px;

In fact, from the brief testing I’ve done (and I can’t find any documentation), it seems you can’t do any of that; unless I’m missing something, the shorthand declaration in Safari accepts only 1 or 2 values, to provide either regular or irregular curves which are applied to all four corners. If you want different irregular corners, you have to supply values to all four declarations:

border-top-left-radius: 5px 20px;
border-top-right-radius: 10px 5px;
border-bottom-right-radius:  10px 20px;
border-bottom-left-radius:  20px 5px;

Mozilla avoid this by going against the spec and allowing only regular curves; so you can provide 1, 2, 3 or 4 values and it’s all perfectly clear.

This problem is down to interpretation of the draft. I personally think Mozilla’s non-standard solution is better – it’s less flexible, but easier to understand – but can’t blame the Safari team for following the standard in their implementation.

It will be interesting to see which comes out on top; in the meantime, if you want to use border-radius in your code the only way to get them to appear the same on both browsers is with a single value for four regular corners:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Originally posted on CSS3.info.

5 comments on
“border-radius: Safari vs Mozilla”

  1. -moz-border-radius: 5px 5px 10px 10px 10px 10px 20px 20px;
    doesn´t work for me!

    Type-Style [March 5th, 2010, 16:53]

  2. It wouldn’t work; as your example uses the same value pairs, you could either use:

    -moz-border-radius: 5px 10px 10px 20px;

    or:

    -moz-border-radius: 5px 10px 10px 20px / 5px 10px 10px 20px;

    Both should work.

  3. Yes it does.
    But where is the difference between those two lines?
    I did´t get that one.

    Am I am able to define a small radius at the beginning and a lager at the End with the second one?

  4. So, each border radius takes two values: x & y. When you use only a single value, it assumes x & y are the same. So:

    -moz-border-radius-topleft: 10px
    =
    -moz-border-radius-topleft: 10px 10px

    That would make a circular radius. But you could also have an oval radius by using two different values:

    -moz-border-radius-topleft: 10px 5px

    But to not have confusion in the shorthand radius, you separate those values with the forward slash; for example, if you wanted all of your corners to have that radius, you’d use:

    -moz-border-radius: 10px / 5px

    Is that clearer?

  5. Once again thanks!
    Yep, that makes thanks and is clearer.
    So oval curves are possible.