[css-borders] Add shorthand for border-shape / corner-shape / border-radius

[nt1m]

The shorthand could be like this:

border-shape: <border-shape-path> | [ <corner-shape> || <border-radius> ] (syntax tbd, including to control the 4 corners )

You'd be able to specify things like this:

border-shape: bevel 30px

border-shape: squircle 30px

cc @noamr @SebastianZ @LeaVerou @fantasai @bert-github

[noamr]

Isn't this identical to inset(0 squircle 50%) etc? perhaps it makes more sense as a basic-shape shorthand than something specific to border-shape?

Having a shorthand raises the question of how a border-shape: round 20% is prioritized alongside border-radius: 30% etc. Usually a longhand has higher priority than a shorthand, but border-shape has higher priority than border-radius. So perhaps allowing inset or rect to not provide coordinates would be cleaner? like border-shape: inset(squircle) or bordrer-shape: inset(bevel 30%)

[nt1m]

Sorry, I wasn't clear in my proposal. border-shape would become the shorthand, and then the existing border-shape would become border-shape-path or something, which would be a longhand of border-shape.

Given corner-shape and border-radius go hand in hand, we should be able to set them together from one shorthand.