You’ve probably heard about the new shape() function (now Baseline) and the corner-shape property. But there’s a third player that quietly solves the biggest headache in CSS shapes: border-shape.

First, a Quick Refresher: shape() and corner-shape

The shape() function lets you use SVG-like syntax inside clip-path and offset-path. It’s cleaner than path(). I wrote a four‑part series on it, plus a separate deep‑dive on complex shapes. And yes — there’s a converter that turns any SVG shape into a valid CSS shape().

corner-shape works alongside border-radius. Instead of just rounding corners, it lets you pick from round, scoop, bevel, notch, or squircle. Neat, right?

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}

But here’s the critical difference: corner-shape plays nice with border, box-shadow, and other decorations. clip-path and mask clip them away. That’s why corner-shape matters — even if support is still Chromium‑only today.

Meet border-shape: The Shape Maker That Keeps Borders

corner-shape only touches corners. What if you want to shape the entire element? That’s exactly what border-shape does. It accepts the same values as clip-path, including shape().

So is it just a rebranded clip-path? No. clip-path clips everything — borders, shadows, outlines — gone. border-shape shapes the element without clipping decorations. Your borders follow the shape. Your shadows follow the shape. No more hacks.

.shape {
  /* Old way */
  clip-path: shape() | polygon() | ...;

  /* New way */
  border-shape: shape() | polygon() | ...;
}

If you already know clip-path, you already know border-shape. Just swap the property name. That’s it.

Border‑Only Shapes: No More Workarounds

Want a shape that’s just the border? Write this:

.shape {
  border: 8px solid red;
  border-shape: /* your shape */;
}

No extra markup. No SVG overlay. The border follows the shape perfectly — even complex ones. I’ve already added border‑only versions to my CSS Shapes collection and online generators for blobs, wavy lines, and fancy frames.

Cutout Shapes: Two Shapes, One Property

Here’s where it gets clever. border-shape accepts two shapes. The spec says:

Stroke mode (single shape): Renders the border as a stroke along the shape’s path.

Fill mode (two shapes): The border is the area between the two paths. The first defines the outer boundary, the second the inner boundary.

So to make a cutout:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* your shape code */;
}

The inset(0) acts as the outer rectangle. Your shape becomes the inner cutout. Want the cutout inside a circle? Swap inset(0) for circle().

Wait — can’t I just use border-radius: 50%? No. When border-shape is active, border-radius is ignored. But honestly, that’s fine — you can recreate any rounded shape directly with border-shape.

What This Means for Business Owners on Cyprus / EU

If your site relies on interactive elements — buttons with custom shapes, product cards with decorative borders, or charts with clipped visuals — border-shape will save development time and reduce CSS complexity. Less code means faster builds and lower maintenance costs. For EU‑based projects, remember that CSS changes don’t affect GDPR compliance, but simpler codebases are easier to audit. And since we serve English, Russian, and Greek audiences, multi‑language layouts benefit from shape‑agnostic containers that adapt without breaking.

Support is still Chrome‑only as of this writing, so don’t ship this to production yet. But start experimenting. When the other browsers catch up, you’ll already know how to use it.

Try the demos in Chrome. Play with the shape converter. Your next design system will thank you.