Inverted Corners
An open source Houdini Paint Worklet for CSS.
A CSS Paint API worklet that renders inverted corners, gradients, masks and image backgrounds from a single element and a few custom properties. Built to find out where the experimental Houdini APIs stop.
What it draws
The interactive playground and a few interfaces built with the worklet.
What I own
A personal experiment, published as a library: written, documented and released on my own.
One shorthand, --corner-radius: 20 20 -20 -20, mirrors native border-radius: positive values curve outward, negative ones scoop inward, with no stacked pseudo-elements or clip-path hacks.
--background takes a color, a list of colors for a gradient, per-color stops, and a leading angle — all painted into the same shape.
Use it as background: paint(inverted-corners) to keep drop-shadow support, or as mask-image to reshape an element and its own background.
Paint Worklets are experimental: the library ships a one-line unpkg install, a paintWorklet in CSS feature check, and documented workarounds like list-style-image for images in Chromium.