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

> > So, my suggestion would be ...
> 
> It looks like this is basically my earlier [`element-shape` proposal](https://github.com/w3c/csswg-drafts/issues/6980#issuecomment-1020301916).

For which I created a [separate issue](https://github.com/w3c/csswg-drafts/issues/6997) because it goes way beyond corner shapes.

> If we accept that fancy borders with different width/colour/styles on each side are edge cases & it's OK to have hard stop changes, then my suggestion of clipping the stroke shape to the box diagonals is easy enough to implement.

@AmeliaBR [`mask-border`](https://drafts.fxtf.org/css-masking/#the-mask-border) already goes into that direction, though it just clips the border, it doesn't have any influence on the stroke shape.

@LeaVerou Are the transitions between borders the reason implementers are reluctant to implement corner shapes? Or is it the missing specification regarding those transitions in Level 4? Or is it something else?

I assume the implementation of bevel shapes in combination with different widths, colors and styles is much easier than for rounded corners. And those are implemented more or less interoperably for so many years now.
But it would really be good to get some implementer feedback on the reasons.

-----

Regarding the two suggested approaches, I think Lea's idea is easier for authors to use in general.

Though I wouldn't actually throw away the idea of the general `corner-shape` property. Instead of introducing a new *property* that only covers bevels, we could add a function for that to `corner-shape`. The big advantage is that we'd only have one new property which can be extended to cover other use cases in the future. And it still plays well with `border-radius`.

Picking up the examples from above, this could look like:

```css
corner-shape: bevel(50%); /* diamond */
corner-shape: edge edge bevel(100%); /* triangle top left */
corner-shape: bevel(50%) bevel(50%) 0 0 / bevel(100%);
```

Though those examples are rather edge cases, anyway. More common cases would be something like `corner-shape: bevel(10px)`.

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

I'd rather stay with `border-radius` for that and I don't think it is that weird to let it apply to two actual corners on the shape.

The implementation complexity can be reduced by restricting the values of `border-radius` that apply when `corner-shape` is something else than `edge` (the default).
E.g. it could be specified that only values without vertical radii (i.e. without the values after the slash) are applied.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8591#issuecomment-1472936203 using your GitHub account


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

Received on Friday, 17 March 2023 00:27:48 UTC