CSS corner-shape: a corner's size vs its shape.

Until now, the only corner CSS could draw was a circular arc. A squircle (the iOS-style curve), a bevel, a notch or a scoop meant SVG, clip-path or a mask, and those cut off your borders and shadows. corner-shape makes it one line, and the border, outline and shadow follow the new shape.

Watch the 60-second version on Instagram.

Size vs shape

The whole property fits in one sentence: border-radius sets how big a corner is, corner-shape sets what shape that corner is. The radius draws the box the corner lives in. The shape decides which curve runs through that same box.

So a squircle is not "a bigger border-radius". The radius is the same; the curve inside it is different.

Every keyword is a number

The keywords are names for values of superellipse(K):

Because they're all points on one scale, corner-shape is animatable: a keyword turns into its superellipse value, so square can morph smoothly into notch. Like border-radius, it takes 1 to 4 values, clockwise from the top-left, and there are physical and logical longhands such as corner-top-left-shape.

No radius, no shape

corner-shape changes nothing without a non-zero border-radius. At radius 0 there's no corner box to put a curve in, so the card stays sharp whatever keyword you set. The figure keeps the shape and changes only the radius: 8, 20 and 32 are example values, and the squircle scales with them.

This site uses radius 0 on every corner, so here corner-shape would do nothing at all.

What follows the shape, and what doesn't

The background, border, outline, box-shadow, overflow and backdrop-filter all follow the new shape. That's the win over clip-path, which cuts the shadow and border off with everything else.

Text doesn't. Content still sits in the original box and isn't inset, so on a scooped or notched corner it can poke past the edge. Add padding.

One more override: if border-shape is set, it wins over corner-shape.

Ship it as progressive enhancement

Support today: Chrome and Edge from 139 (shipped 2025.08.05) and other Chromium browsers. Firefox has it in Nightly behind a pref, Safari in Technology Preview, and neither has shipped it. MDN marks it experimental and not Baseline.

So treat the radius as the part everyone gets and the shape as the extra:

.card {
  border-radius: 32px;           /* size: every browser */
}
@supports (corner-shape: squircle) {
  .card { corner-shape: squircle; } /* shape: Chromium today */
}

Chrome gets a squircle. Safari and Firefox get round corners from the same CSS, and both look fine.

Chrome 155 (beta on 2026.09.16) also added a corner shorthand plus per-corner and edge shorthands that set radius and shape in one declaration. It's newer than the property itself, so I'd keep border-radius + corner-shape as the main syntax for now.

On a client project I'd ship it today behind @supports, but only on cards where round corners are an acceptable fallback, never where the shape carries meaning.

As for the other engines: Josh Comeau listed corner-shape as one of his picks for Interop 2027 on 2026.10.20. Interop 2027 is still being planned and its list hasn't been announced, so that's a wish, not a date.

What people get wrong

• "Squircle is a bigger radius." Radius is the size; shape is the curve inside that size.
• "corner-shape works on its own." With border-radius: 0 it does nothing.
• "It's supported now." On stable, it's Chromium-only.
• "The content follows the curve." It doesn't; pad it.

The short version

1. border-radius is the size of a corner; corner-shape is its shape.
2. The keywords are superellipse(K) values: notch -∞, scoop -1, bevel 0, round 1, squircle 2, square ∞, so they animate into each other.
3. No radius, no shape.
4. Borders, outlines and shadows follow the shape; text doesn't, so add padding.
5. Chromium 139+ only on stable: wrap it in @supports and let everyone else keep round corners.

Sources: MDN, corner-shape · CSS Borders 4 draft · Chrome 155 beta · New in Chrome 139 · MDN BCD, corner-shape.json · Mozilla intent to prototype · Josh Comeau, The Future of CSS