[css3-border][css3-background] border-radius with <angle>

The ‘border-radius’ properties accept two values for each corner, separated by a solidus. The second one is optional and defaults to the same length as the first one.

  border-radius: 3em / 4em; /* =: rh / rv */

The two lengths are used to construct an ellipse (or circle if equal). Since the radii of this ellipse are orthogonal they are also the adjacent and the opposite of a right triangle. If this triangle is mirrored on its hypotenuse only one corner is mirrored: from the center of the ellipse to the original, rectangular corner. In other words, the hypotenuse is the diameter of the rectangular spanned by the two lengths (5em in the example).

There are only three angle values of interest in this rectangle:

 90°, arctan(rh/rv), arctan(rv/rh)

and because

 90° - arctan(rh/rv) = arctan(rv/rh)

it’s really just one angle and its complement. 

Since the two-value notation already looks like it specifies the tangent of the interior angle at the vertical edge or the exterior angle at the horizontal edge, I wondered whether border radius could also be specified with <angle> values. You would of course also need some kind of scaling factor, perhaps the lengths of the hypotenuse.

  border-radius: 37deg 5em;

would then specify (approximately) the same curved border as the example at the beginning. 

This might not look as useful on its own, but imagine we wanted to introduce not rounded but “cut” corner shapes where the hypotenuse (or diameter) would become visible instead of some arc. (Shorthand) properties could then work like this:

  border-corner: _normal_ | curved | sharp
  border-radius – if specified sets ‘border-corner’ to ‘curved’


  border-radius: <border-corner-shape>
  border-cutoff: <border-corner-shape>
  <border-corner-shape>: [ horizontal-radius [ / vertical-radius ]?
                         | <angle> diameter ]

Received on Tuesday, 13 March 2012 11:58:31 UTC