Idea
A utility for making a corner curve away from a box (a concave/inverted corner), as opposed to the normal convex border-radius. Not natively achievable with border-radius alone — needs a mask, gradient/box-shadow trick, or clip-path approach.
Why
Distinctive visual detail that shows up in a lot of modern page-builder-driven design work (overlapping panels, "notch" effects between adjacent sections). We have nothing like it — only the standard convex --sf-radius-* scale.
Scope
- Research the cleanest modern CSS technique first (
mask/conic-gradient vs box-shadow illusion vs clip-path) — pick our own best implementation rather than copying a specific existing approach.
- Should be opt-in/low-specificity (this is a niche effect, not every project needs it) — likely a macro or a couple of utility classes with corner + radius as configurable custom properties.
- If shipped: update
docs/llm-guide.md per repo CLAUDE.md token-doc rules.
Idea
A utility for making a corner curve away from a box (a concave/inverted corner), as opposed to the normal convex
border-radius. Not natively achievable withborder-radiusalone — needs a mask, gradient/box-shadow trick, orclip-pathapproach.Why
Distinctive visual detail that shows up in a lot of modern page-builder-driven design work (overlapping panels, "notch" effects between adjacent sections). We have nothing like it — only the standard convex
--sf-radius-*scale.Scope
mask/conic-gradientvsbox-shadowillusion vsclip-path) — pick our own best implementation rather than copying a specific existing approach.docs/llm-guide.mdper repoCLAUDE.mdtoken-doc rules.