CSS WG Blog – Resolutions 2007-09 Beijing Part IV: CSS3 Borders

Resolutions 2007-09 Beijing Part IV: CSS3 Borders

By fantasai September 25, 2007 (Permalink)
Categories: resolutions

Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
```
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
```
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.

Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.

This is recorded as issue 4.
Although we did discuss it, there is no resolution on an extended shorthand syntax for setting elliptical curves. (The WG is generally hesitant to add more punctuation to values without very strong rationale, and also there was no clear agreement on what punctuation should be used.)

Resolved: We agreed that we do not want to have pointy borders, but we have not resolved how to achive that.

Rationale: Web designer feedback.

Comments: There are many ways of eliminating a pointy intersection of two curves. Based on Brad Kemper’s feedback, the best way would be to reduce the affected corners’ x and y radii in proportion, as this will preserve the shape of the curve. We still need to investigate the exact (mathematical) formulation for this solution, particularly how multiple overlapping corners interact.

This is recorded as issue #5.

Resolved: The inner border radius is the outer border radius minus the border thickness. In the case where this results in a negative value, the inner radius is zero and in this case the inner curve’s center may not coincide with that of the outer border curve.

Resolved: The center of color and style transitions are at an angle that is proportional to the ratio of the border widths. E.g. if the two widths are equal, the angle is 45deg, and if one is twice the width of the other the angle is 30deg. The line demarcating this transition is drawn between the point at that angle on the outer curve and the point at that angel on the inner curve.
Noted: There is no resolution on what the transition looks like. (We do seem to expect gradients for color transitions.)
We also discussed whether content should be fitted to the curve, and concluded that if the curve of the content edge needs to be known, it should follow the same principle we established for the inner and outer border edges. However it seems we don’t really want content to fit to the curve as that makes border-radius affect layout and will thus prevent us from extending border-radius to take percentages in the future. Therefore some other mechanism for changing the containing block shape would probably be better.

Last updated 2007-09-25 12:02:45