Squircles in CSS: how corner-shape works, and how to ship it safely

CSS can now draw squircles, the smooth, continuous corners familiar from app icons, without SVG masks or JavaScript. The corner-shape property changes the curve of the corner that border-radius creates:

.card {
  border-radius: 32px;
  corner-shape: squircle;
}

That's the whole technique. Where corner-shape isn't supported, the browser ignores it and draws a normal rounded corner. That's why it's safe to use today.

This site uses exactly that pattern on its cards and the gradient panel on the home page, so the examples below come from real use.

How corner-shape works

corner-shape doesn't replace border-radius, it depends on it. MDN is explicit: if border-radius isn't set, or resolves to 0, corner-shape does nothing. The radius sets how big the corner is; corner-shape sets the shape of the curve within that space.

Every shape is a point on one scale, the superellipse() function. The keywords are shortcuts:

Values between the keywords work too, such as superellipse(1.5). Different values can be animated, because the browser interpolates between superellipses.

Like border-radius, it accepts one to four values (clockwise from top left). There are also per-corner properties such as corner-top-left-shape, and logical ones such as corner-start-start-shape.

What follows the shape

This is what makes it better than older workarounds. According to MDN, the background, border, outline, box-shadow, overflow clipping and backdrop-filter all follow the shape.

The old ways, like an SVG mask or clip-path, clip the shadow and the border along with the box. With corner-shape, a card can have a squircle outline and a shadow that matches it.

Browser support

corner-shape shipped in Chrome 139 in August 2025, so it works in Chrome, Edge and other Chromium browsers. MDN marks it as not Baseline: at the time of writing, Safari and Firefox don't support it.

In practice, visitors on Safari and Firefox see an ordinary rounded corner. For most interfaces that's fine: the design still works, and the squircle is a finishing touch for browsers that have it.

Three things to know before using it

1. A squircle looks less rounded at the same radius

A squircle curve sits closer to the corner than a circular arc, so border-radius: 32px with corner-shape: squircle looks tighter than a plain 32px corner. If you're matching a design mock-up, compare both in the browser. You may want a larger radius when the squircle is applied.

2. Decide whether the fallback is good enough

Progressive enhancement only works if the plain rounded version is acceptable. If a brand really depends on the squircle, as with an icon grid meant to match iOS, feature-detect and provide an alternative:

@supports not (corner-shape: squircle) {
  .app-icon {
    /* e.g. an SVG mask for browsers without corner-shape */
  }
}

3. Use it where the corner is visible

Squircles show most on large surfaces and on shapes seen in a row, like cards, panels, tiles and avatars in a grid. On a 4px button radius the difference is barely visible.

Using it with Tailwind CSS

Tailwind CSS v4 doesn't need a plugin. An arbitrary property works next to the radius utility:

<div class="rounded-[32px] [corner-shape:squircle]">…</div>

This is how the cards on this site are written. On narrower screens a responsive radius such as max-md:rounded-[20px] still applies, and the squircle scales with it.

Sources

• corner-shape, MDN Web Docs
• Chrome 139 release notes
• Beyond border-radius: What the CSS corner-shape property unlocks for everyday UI, Smashing Magazine