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.
-moz-border-radius: 5px 5px 10px 10px 10px 10px 20px 20px;
doesn´t work for me!
Type-Style [March 5th, 2010, 16:53]
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.
Peter [March 5th, 2010, 17:03]
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?
Type-Style [March 16th, 2010, 16:16]
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?
Peter [March 16th, 2010, 23:36]
Once again thanks!
Yep, that makes thanks and is clearer.
So oval curves are possible.
Type-Style [March 17th, 2010, 15:55]