Re: [csswg-drafts] [css-borders-4] Specify how borders are rendered for `corner-shape` (#11610)

After many iterations together with @smfr and @fserb, I think we have a good model:

- Shaped borders do not create new constraint on the radius. Instead, they are clipped by the outer shape, and can overlap with each other when concave. This allows creating shapes like a scooped star:

![Image](https://github.com/user-attachments/assets/731bde1e-00e8-45ca-bb1e-303006742091)

- The border should have its specified interpolated thickness through entire length when possible. Same for shadows. This requires a formula similar to [this one](https://drafts.csswg.org/css-backgrounds/#corner-shaping), but one that's applicable for arbitrary curvature. As a general rule, it should feel like two superellipse quadrants, with the same center, same curvature, and a different radius. It's basically what @smfr describes in https://github.com/w3c/csswg-drafts/issues/11610#issuecomment-2680514021, but applied to all superellipses.
- Dashed/dotted borders etc should be rendered side-after-side, which might create some overlaps. This would be consistent with the convex versions in case of animations.
- Color joins should work similar to how they work for ordinary rounded corners - they should either cross diagonally between the border and padding edges, or try to slice the corner at its middle.

Would love to get a resolution on this soon!

@tabatkins @fantasai @LeaVerou @yisibl




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


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

Received on Tuesday, 11 March 2025 13:59:07 UTC