[css-background-4] Replace corner-shape with property that just does angled corners + rounding #8591
Description
At this point, it's very clear that there is little implementor interest for corner-shape as it's currently specified. It has been in the spec for over a decade, so this is unlikely to change.
However, looking at the corner-shape use cases in #6980, I am observing these things:
a) The vast majority just need bevel (angled) corners. scoop and notch are rather rare and niche enough that I think are fine being delegated to CSS shapes or border-image.
b) Quite frequently, these angled corners also require rounding, which the current syntax does not actually do.
Therefore, the current design of corner-shape which treats border-radius as a fallback with the same radius, won't work (and there has been feedback that this is a worse fallback than nothing at all for most use cases).
Angled corners
Instead, I propose a corner-angle property (name TBB) which only does angled corners.
It takes the same syntax as border-radius, with keywords for common cases, such as:
diamond=50% 50% 50% 50%triangle top left=0 0 100%(+ keywords for all four corners)triangle top=50% 50% 0 0 / 100%(+ keywords for all four sides)
Brainstorming for property name:
corner-anglecorner-cutoutcutout-sizebevel-radiuscorner-sizeangled-cornerscutout-corner-size
Angle rounding
It seems that rounding is essential to satisfy the use cases in the real world, otherwise authors will still resort to images. border-radius could work together with the new property to add rounding to the angles generated. This has the advantage of re-using an existing property, but it has some pretty major disadvantages:
First, border-radius is designed to specify rounding for 1-4 corners, whereas this syntax can create up to 8 angles:
So, how would we map border-radius's four corners to these eight? We could map it to pairs (e.g. border-radius for top left corner rounds both 1 and 2 above), but that's pretty weird. But the primary problem is pointless complexity and wasted implementation effort to make any possible border-radius value work with these polygons, when the vast majority of use cases just needs a single radius. Personally, I have not seen single a single use case that requires more than that.
So perhaps we need a separate property (angle-radius?) that just takes a single <length>. Though it is a bit weird that this basically becomes a subset of border-radius when corner-angle is initial.
Other considerations
Whatever syntax we go with, we should make sure it allows combining regular border-radius with this, e.g. it should allow having two angled corners (with or without rounding) plus two rounded corners (with the full power of border-radius).