- From: Brad Kemper via GitHub <sysbot+gh@w3.org>
- Date: Wed, 06 Jul 2022 16:09:12 +0000
- To: public-css-archive@w3.org
> I think part of this came from the fact that border-radius is part of the css-background spec and clip-path is part of the css-masking spec, though IMO they should have been made consistent, clip-path being a superset of border-radius allowing the same behavior but more expressive paths than just rounded corners. Yes, `border-radius` is proof that the ordinary and familiar `border` property can follow more complex shapes, without having to resort to something live SVG stroke (though if we went that route for arbitrary shapes, we'd need to decide how to handle path corner mitering in a CSS way [maybe not `stroke-linejoin`], which is probably a whole other conversation). `Border-radius` is still useful and convenient by itself though. > That's why I initially proposed border-path to remain consistent. This idea is growing on me. Here are my thoughts on how that could work: # Border-path - `border-path` defines a path using syntax derived from `clip-path` and `shape-outside`. - Initial value of `border-path` is `padding-box`, meaning the path follows the outside of the padding box, and the stroke is drawn outside of that. That is, the path is defined as the edge between the inner border and the outer padding (and that path describes the padding box), with the stroke always being outside the path, not centered on it like SVG path strokes. This is a CSS border. - If you were to use SVG to simulate/polyfill a `border-path` with a border, you would need to offset the path by half the `border-width` and then use the `border-width` as the stroke width. - `clip-path` can have a value of `border-path`, which would cause it to use the path defined in the `border-path` property. - Any non-initial value for `border-path` will set the computed value of `clip path` to either `border-path` or `none`, depending on if `overflow` is `visible` or not. - Margin: just as `border-radius` doesn’t affect margin, neither does `border-path`. However: - `shape-outside` can have a value of `border-path`, which would cause it to use the path defined in the `border-path` property, offset by the value of `margin-top` or `margin-block-start`. This is only visibly noticeable if the element is floated. `shape-outside: margin-box` would still use the four sides and 4 corners to determine float shape. - Any non-initial value for `border-path` will cause `box-shadow` to follow the path (think of it as shape-shadow, if that helps). The shadow is a blurred and/or offset and/or spread copy of the shape created by the `border-path`, with the original non-offset, non-blurred, non-spread shape knocked out of it (or if `inset` keyword is used, everything outside of that shape knocked out of it). -- GitHub Notification of comment by bradkemper Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5881#issuecomment-1176411578 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 6 July 2022 16:09:14 UTC