Thoughts on web development and technologies by Peter Gasston
border-radius: Safari vs Mozilla
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.