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

More or less universal solution would be to use cubic Bezier curves
to define large variety of possible shapes.

With beziers in CSS we will be able to define corners and borders like this:
http://terrainformatica.com/w3/css4-ext-borders.png

To define such corner we will need width/height of corner area "box".

    corner-box:  <length>{1,4} [ / <length>{1,4}]?

and its shape

   corner-shape: ellipse | ...
                    | cubic-bezier(<number>, <number>, <number>, <number>)]*

I tried this already - it can produce very useful and cool shapes indeed.

Pair of corner-box/corner-shape is a superset of border-radius feature that
we have already. So with corner-box/corner-shape we will need to redefine
border-radius as shorthand property for these two:

   corner-box: border-radius * 2;
   corner-shape: ellipse;

-- 
Andrew Fedoniouk

http://terrainformatica.com


-----Original Message----- 
From: fantasai
Sent: Wednesday, August 31, 2011 4:29 PM
To: www-style@w3.org
Subject: Re: Idea : replacement for border-radius, a more complete corner 
styling property.

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 Thursday, 1 September 2011 04:01:19 UTC