Re: [csswg-drafts] [css-masking] Inverse clip-path (#10445)

There are no rounded corners in any of these cases, and actually rounding corners can be even trickier. Even in the mask attribute, it's almost impossible to do it in pure CSS, and needs to be done in conjunction with SVG.

https://codepen.io/yisi/pen/BagqKNq?editors=0100

https://github.com/user-attachments/assets/cfe24acf-e315-4b9e-aa71-c5427a249bdd

I would also expect to be able to support syntax like `mask: rect(10px 10px 100% 100% round 20px)`.

In addition, in my scenario, wouldn't it be better not to use CSS `mask` or `clip-path`, since CSS mask doesn't work well with inset `box-shadow`.

![image](https://github.com/user-attachments/assets/7ab5194c-4c11-4db1-93ce-957ede3c3b12)

Maybe we need a new `inner-border-radius` property?
This would work well with `background-clip: border-area` to achieve inner rounded corners with a gradient.



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


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

Received on Monday, 2 September 2024 17:16:23 UTC