Squircles

A normal rounded corner is a quarter circle. The straight edge runs along, then the arc starts, and there is a point where one becomes the other. You can feel that point even when you cannot see it.

A squircle removes it. The curve starts earlier and eases into the edge, so the corner has no beginning and no end. It is the shape of an iOS app icon, and it is why those icons look softer than a box with the same radius.

corner-shape: round

corner-shape: squircle

Both tiles use the same 28px radius. Only the corner shape changes.

One property

Corner shape is now a CSS property. The radius still sets how big the corner is, and corner-shape sets what curve fills it.

Keep the radius, change the shape. Because it is part of the box itself, the background, border, shadow and overflow: hidden all follow the new curve. No mask, no SVG path, no extra element.

The Tailwind utilities come from the corner-shape plugin.

How much curve

The keywords are named points on one scale, superellipse(). Drag the slider to move along it.

superellipse(2.0)squircle

Curvature2.0

1 is a circle, so it matches round. 2 is squircle. 0 is a flat bevel, and negative values scoop inwards. Apple's icon curve sits a little past 2, around superellipse(2.3).

Anything from 1.5 to 2.5 reads as a squircle. Go higher and the corner starts to look square again.

Where it shows

The effect scales with the radius. A big radius on a small box, like an avatar or an app icon, changes character completely. A small radius on a button barely moves, and that is fine, it just feels a touch softer.

Continue

RoundSquircle

RoundSquircle

Two things to keep from the nested corners page. Set the shape on both the outer and the inner box, since it is not inherited, and keep the outer radius equal to the inner radius plus the inset. A squircle outside a round corner looks worse than two round corners.

A slightly bigger radius

At the same radius, a squircle looks tighter than a round corner, because the curve spends less of its length near the edge. If you swap the shape on an existing component and the corner looks smaller, it is. Nudge the radius up by roughly a quarter and compare again.

Support

Browsers that do not know corner-shape ignore it and draw a round corner. That is the right fallback, so there is nothing to feature-detect for most UI. If the shape is part of the brand, generate the path with a tool like figma-squircle and apply it with clip-path or a mask where the property is missing.