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.