CSS3

  • 200719 Jun

    border-radius: Safari vs Mozilla

    by Peter Gasston

    Posted in CSS3 Preview, Declarations, Modules, W3C

    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;

    You can skip to the end and leave a response.

  • Comments

Leave a Comment

(will not be published)

Subscribe to our RSS

OUR SPONSORS

Advertise here?
PSD to HTML

Hosting by:

CATEGORIES
FRIENDS
Meta
TAG CLOUD

©2008.All Rights Reserved. While using this site, you agree to have read and accepted our terms of use and privacy policy.