border-shape is the property clip-path always owed you

Developers who rely on clip-path or mask have long faced the same frustration: shaping an element also clips away anything painted around it, including borders, box-shadows and outlines. That's because clip-path clips the entire painted element, decorations included. A CSS-Tricks explainer by Temani Afif covers the new border-shape property, which flips this model — instead of clipping, it reshapes the box, so borders, shadows and outlines now follow the custom outline rather than the underlying rectangle.

border-shape reuses the same syntax and shape() function as clip-path, keeping the learning curve minimal. It also supports stroke and fill modes, letting developers paint a border as the area between two shapes — something that previously required pseudo-elements and overflow hacks. Combined with the fact that shape() is now Baseline and the sibling corner-shape property handles corner-level styling, CSS shape tooling finally feels like a coherent system rather than scattered workarounds.

The catch is that support is currently Chromium-only, making border-shape unsuitable for production use just yet. For now, it's best explored in side projects, with an eye on graceful fallbacks and eventual adoption by Gecko and WebKit.