[css-shapes-2] Maybe add superellipse/squircle etc as basic shapes?

[noamr]

With #10993, we're going to have the generic superellipse() and specifics like squircle as corner shapes.
Perhaps we could have 50%-radius version of them as basic shapes? thinking clip-path: squircle(50%) (similar to circle) is a no brainer.

[tabatkins]

We already have the ability to specify round border-radius on rect https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect like rect(... round 1em); with corner-shape we should edit the spec to be able to specify rect(... squircle 1em) instead.

(I'm not against a squircle(), just pointing out we have a more straightforward existing way to do it.)\

[noamr]

We already have the ability to specify round border-radius on rect https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect like rect(... round 1em); with corner-shape we should edit the spec to be able to specify rect(... squircle 1em) instead.

(I'm not against a squircle(), just pointing out we have a more straightforward existing way to do it.)\

Oh yea, I forgot that basic-shapes already have a corner-shape variant (since the old corner-shapes were still on the drawing board)

[noamr]

Now that corner-shape is integrated, I think we can tackle this.
There are 3 places where I would add superellipse support:

1. rect / inset / xywh

Change everywhere that says border-radius to corner, which would resolve to [ border-radius && <<corner-shape-value>>?].

2. A new shape() command that allows drawing a corner

corner [to | by] [position/coordinates etc.] [ <<corner-shape-value>> ||  [rotate <<angle>>] || [cw | ccw]] 

This would rotate the axis, and would draw a clockwise/counterclockwise corner between the start and end points with the given curvature (square & clockwise by default). Note that ccw is equivalent to multiplying the corner-shape superellipse value by -1 but it's an ergonomic way to express it.

[SebastianZ]

Change everywhere that says border-radius to corner, which would resolve to [ border-radius && <<corner-shape-value>>?].

I assume you mean [ <'border-radius'> && <corner-shape-value>? ], right?

corner [to | by] [position/coordinates etc.] [ <<corner-shape-value>> ||  [rotate <<angle>>] || [cw | ccw]] 

In CSS we generally refrain from having abbreviations, so I'd vote for using clockwise and counterclockwise as keywords.

So, writing the whole syntax out, I guess this should be

<corner-command> = corner
        [ <corner-shape-value> || rotate <angle> || [ clockwise | counterclockwise ] ]
        [ [ to <position> ]
        | [ by <coordinate-pair> ] ]

Sebastian

[noamr]

Change everywhere that says border-radius to corner, which would resolve to [ border-radius && <<corner-shape-value>>?].

I assume you mean [ <'border-radius'> && <corner-shape-value>? ], right?

Yes

corner [to | by] [position/coordinates etc.] [ <<corner-shape-value>> ||  [rotate <<angle>>] || [cw | ccw]] 

In CSS we generally refrain from having abbreviations, so I'd vote for using clockwise and counterclockwise as keywords.

We use cw and ccw inside shape() already for arcs.

So, writing the whole syntax out, I guess this should be [grammar snippet]

Something like this, yes.