W3C home > Mailing lists > Public > www-style@w3.org > March 2012

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 13 Mar 2012 12:33:27 -0700
Message-ID: <CAAWBYDAptur5GTL_d0_NcgBT9NdU3dt4aqCmF8Ljwahtm+buqw@mail.gmail.com>
To: Christoph Päper <christoph.paeper@crissov.de>
Cc: "www-style@w3.org CSS" <www-style@w3.org>
On Tue, Mar 13, 2012 at 4:58 AM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> 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’
>
> or
>
>  border-radius: <border-corner-shape>
>  border-cutoff: <border-corner-shape>
>  <border-corner-shape>: [ horizontal-radius [ / vertical-radius ]?
>                         | <angle> diameter ]

While this would be an alternate and unambiguous way of specifying the
border-radius, do you have evidence of anyone actually asking for
this, ever?

~TJ
Received on Tuesday, 13 March 2012 19:34:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:51 GMT