Squircles in CSS: corner-shape, superellipse() and Browser Support (2026)

For years, the honest answer to "can you make a squircle in pure CSS?" was no. border-radius produces rounded rectangles — circular arcs at the corners — not the continuously smooth curve of a true squircle. That gap is finally closing. CSS now has a corner-shape property and a superellipse() value designed to draw exactly this shape natively.

This guide covers what corner-shape is, how to draw a squircle with it, where browser support stands in 2026, and how to ship smooth corners in every browser today while support catches up.

What corner-shape Is

corner-shape is a new CSS property that controls the geometry of a corner, while border-radius continues to control its size. Where border-radius alone always draws a circular or elliptical arc, corner-shape lets you tell the browser to draw a different curve in that same corner box.

The property accepts a set of named values, each of which is shorthand for a superellipse() function: round is the default and equals superellipse(1) — the circular corner you get today; squircle equals superellipse(2) — the iOS look; bevel equals superellipse(0) — a straight diagonal cut; scoop equals superellipse(-1) — a concave corner; notch equals superellipse(-infinity); and square equals superellipse(infinity) — a sharp corner. You can also pass superellipse(<number>) directly to tune the curve to any point between these presets. Like border-radius, the shorthand accepts one to four values to target corners individually, and per-corner longhands such as corner-top-left-shape exist as well.

The crucial detail is that corner-shape has no visible effect without a non-zero border-radius. The radius defines the corner box; the shape defines the curve drawn inside it. Set corner-shape: squircle on an element with border-radius: 0 and nothing happens — the two properties only produce smooth corners together. superellipse(K) draws the curve x^(2K) + y^(2K) = 1 within that corner box: K=1 is an ordinary round corner, K=2 is the squircle that matches the iOS aesthetic, and higher values grow progressively squarer.

Making a Squircle with corner-shape

To draw a squircle, pair a border-radius (which sets the corner size) with corner-shape set to a superellipse (which sets the corner curve):

.squircle {
  border-radius: 24px;
  corner-shape: squircle; /* equivalent to superellipse(2) — the iOS look */
}

The corner-shape keyword squircle is shorthand for superellipse(2). You can pass other values to superellipse() to tune the curve: superellipse(1) is an ordinary round corner, larger numbers flatten the sides and tighten the curve toward a sharp corner, and negative numbers curve inward (scoop, notch).

Because border-radius still controls the size, everything you already know about radii carries over: percentage values, per-corner values, and elliptical radii all combine with corner-shape as you would expect. A generous radius paired with corner-shape: squircle is what produces the smooth, continuous corner that border-radius alone has never been able to draw.

Browser Support in 2026

corner-shape is a young feature, so support is the deciding factor in whether you can rely on it in production today. Here is where the major browsers stand as of June 2026:

In other words, as of June 2026 corner-shape is a Chromium-only feature: it reaches roughly 65% of users globally and is not yet Baseline, with no public timeline from Safari or Firefox. Any production use today therefore needs a fallback so visitors on Safari and Firefox still see smooth corners.

iOS-style Corner Smoothing in CSS

The squircle most people picture is Apple's — the shape of every iOS app icon. It is a superellipse with continuous corner smoothing, the same property Figma exposes as a "corner smoothing" slider. With corner-shape: superellipse(), CSS can finally target that exact look rather than approximating it.

The mapping is direct: corner-shape: squircle is shorthand for superellipse(2), and superellipse(2) is the curve that lands on the iOS aesthetic — the story of how Apple adopted the squircle is the story of this exact shape. Values above 2 dial the smoothing up, flattening the sides and pushing the corner toward square; values between 1 and 2 dial it down toward an ordinary round corner. That is precisely what Figma's slider does — interpolate between a circular arc and a squarer superellipse — except now the dial lives in a stylesheet instead of a design tool.

The Fallback: Smooth Corners in Every Browser Today

Until corner-shape ships everywhere your users are, you still need a way to render squircles that works in every browser. That is what @squircle-js/react does: it generates an SVG clip-path for the exact superellipse and applies it as a CSS clip-path, so the shape is identical across browsers regardless of corner-shape support.

npm install @squircle-js/react

When corner-shape reaches full support, this same markup can be progressively enhanced — or replaced — with the native property. For the deeper background on why border-radius cannot do this and how the clip-path approach works, see squircles in web design.

Frequently Asked Questions

Can you make a squircle with pure CSS?

Yes — in Chromium 139+ you can pair border-radius with corner-shape: squircle and get a true squircle natively. As of June 2026 Safari and Firefox do not support it, so cross-browser squircles still need a fallback such as an SVG clip-path.

What is superellipse() in CSS?

superellipse() is the function behind every corner-shape keyword: it takes a number that controls how square or round the corner curve is, where superellipse(1) is an ordinary round corner and superellipse(2) is the iOS-style squircle.

Does Firefox support corner-shape?

No — as of June 2026, corner-shape is supported only in Chromium-based browsers (Chrome and Edge 139+), with no public timeline from Firefox or Safari.

Is corner-shape the same as border-radius?

No. border-radius sets the size of the corner while corner-shape sets the curve drawn inside it — and corner-shape has no visible effect unless a non-zero border-radius is also set.