CSS border-shape: True Non-Rectangular Elements
Custom border shapes without clip-path hacks
clip-path masks an element into a shape but the underlying box stays rectangular. Shadows, borders, and outlines ignore the mask. border-shape redefines the geometry itself, so every visual property follows the shape.
.tooltip { background: var(--accent); padding: 1rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% + 12px), 0 100%);}/* clip-path masks the visual but the box is still rectangular for layout, shadows, and outlines.tooltip { border-shape: shape(from 0 0, hline 100%, line to 50% calc(100% + 12px), line to 0 100%, close); background: var(--accent); padding: 1rem;}/* the box itself is the shape, no clip-path neededborder shape Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
border-shape is not yet shipping in any release browser. As of 2026 it is only available in Chrome Canary 146+ behind the chrome://flags/#enable-experimental-web-platform-features flag, and the spec is still a W3C Working Draft. The syntax may change before it stabilizes. Use clip-path with the same coordinates as a fallback for now, and revisit this snippet once the feature reaches Chrome stable.
Shadows follow the shape
clip-path hides parts of the box, so a box-shadow on a tooltip still draws a rectangle. border-shape changes the geometry, so the shadow traces the actual outline.
Real borders and outlines
Borders and outlines hug the custom shape. With clip-path, both still draw on the original rectangle and get masked, leaving you no real border at all.
Pointer events match
Hit testing follows the shape too. With clip-path you have to add pointer-events: none on the masked-out parts manually, or live with hover targets that stick out.
How it works
clip-path has been the only way to make non-rectangular elements in CSS for years, but it does something narrower than people expect. It masks the visual content of the element. The underlying box is still a rectangle, which means borders, outlines, and box-shadows all follow the rectangle, then get cut off by the mask. A tooltip clipped into an arrow shape ends up with a shadow that looks rectangular, with the arrow's shadow missing.
border-shape changes the element's geometry instead of masking it. The shape becomes the element. Borders trace the path. Outlines hug the path. Shadows offset the path correctly. Pointer events only fire inside the path. The shape() function uses an SVG-like grammar (from, line to, hline, vline, curve, arc, close) so the same shape can replace what clip-path-with-polygon used to do, but now everything else respects it.
Common cases that get easier: tooltips with arrows, chevron breadcrumbs, scalloped cards, speech bubbles, hexagonal avatars. With clip-path you wrote the polygon and then patched around the broken shadow and border. With border-shape you write the shape once.