Re: [csswg-drafts] [css-masking] Find a way for clip-path to play nicely with borders and filters (#5881)

> > Namely, a [CSS shape](https://drafts.csswg.org/css-shapes/).
> 
> Yes, but including `<basic-shape>`, `<shape-box>`, and `<image>`.
Got it.

> It just felt like `border-path` would mostly subsume using `clip-path` as a separate property, and it wouldn’t really be needed much anymore, unless someone wanted to see a clipped border or something. Thus, people would set the path in `border-path`, and other properties, including `border`, `overflow`, `clip-path`, and `margin` would adapt to intuitive expectations, where `border`, `overflow`, and `margin` would be used in super-familiar ways, but for a shape that isn’t necessarily a (potentially round-cornered) rectangle. So, you wouldn’t need to need to use `clip-path` by itself much anymore, and you wouldn’t want circular references for what the shape is (both properties saying to get the shape from the other one). You would still need `clip-rule` to affect a path that was imported into `border-path`.

Thanks, this explains it.

> 
> 
> > I also wonder how it should interact with `border-radius`.
> 
> I’d say it mostly shouldn’t. You either use the box and it’s sides and (possibly rounded) corners for the shape, or you create some other shape. Suppose you have `border-path: padding-box inset(12px)` and `border-radius: 30px`. Then your shape would still be a rounded rectangle, with 18px corner radii.

OK, I get how it would behave in those simple cases, but what would be the behavior if you have both a complex path and a border radius?

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


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

Received on Thursday, 7 July 2022 04:27:41 UTC