W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Re: Idea : replacement for border-radius, a more complete corner styling property.

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 31 Aug 2011 16:29:47 -0700
Message-ID: <4E5EC3EB.2040908@inkedblade.net>
To: www-style@w3.org
On 08/03/2011 08:30 PM, Joel Rea wrote:
>
> First off, it’s “border-radius-SHAPE,” not “border-radius-STYLE.” ...
>
> Secondly, using a negative value has a different purpose. “border-radius-shape: concave” is a specific border rounding shape. The technical implementation algorithm aspects would be something like this:
> ...
> The current standard is “convex” repositions (shifts) the ellipses so that their outer quadrant circumferences are tangent to the box shape (or, if you prefer, so that the bounding box of the ellipse exactly overlaps the actual box sides and corners). The algorithm traces the outer quadrant of the ellipse starting with the point tangent to one box side of that corner, and ending with the point tangent to the other box side of that corner. This produces the traditional “rounded corners” effect. This would be the default.
>
> The “concave” shape would (A) leave the ellipse centered on the box corner, and (B) reverse which portion of the ellipse is traced: instead of the outer quadrant, it traces the quadrant opposite that, the only quadrant that now intersects the box itself, cutting out a convex quarter of a circle or ellipse from the corner.
>
> The “beveled” or “angled” or “diagonal” shape also leaves the centers coincident with the corners, but instead of tracing any portion of the circumference, it instead traces the diagonal diameter, with the endpoints at the tangent points.
>
> The “box-convex” and “box-concave” do what “convex” and “concave” normally do, but trace the ellipse’s bounding box instead of its circumference. Since “box-convex”, like “convex”, shifts the ellipse centers inward to cause it to exactly overlap the box itself, this normally would have no visual effect, but in conjunction with “box-radius-style” (and, I just thought of, “box-radius-color”), it could apply a separate style and/or color to the corner.

So how about adding something like
   border-corner-shape: curve | bevel | scoop | notch
to css4-background?

~fantasai
Received on Wednesday, 31 August 2011 23:30:18 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:43 GMT