[csswg-drafts] [css-background-4] Replace `corner-shape` with property that just does angled corners + rounding (#8591)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-background-4] Replace `corner-shape` with property that just does angled corners + rounding ==
At this point, it's very clear that there is little implementor interest for [`corner-shape`](https://drafts.csswg.org/css-backgrounds-4/#corner-shaping) as it's currently specified. It has been in the spec for [over a decade](https://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations/), 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 I'm fine delegating them 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 many use cases).

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%` (repeat for all four corners)
- `triangle top` = `50% 50% 0 0 / 100%` (repeat for all four sides)

<details><summary>Brainstorming for property name:</summary>

- `corner-angle`
- `corner-cutout`
- `cutout-size`
- `bevel-radius`
- `corner-size`
- `angled-corners`
- `cutout-corner-size`

</details>

### 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:

<img width="417" alt="image" src="https://user-images.githubusercontent.com/175836/225345178-b7161e18-9462-4465-98ae-85cd208e9150.png">

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`.

cc @fantasai @SebastianZ 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8591 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 15 March 2023 15:35:39 UTC