Squircle

A normal rounded rectangle is a straight edge and a quarter circle stitched together. The two pieces meet at a tangent, so the outline never kinks, but the curvature does: it is zero along the edge and then, at one exact point, it is one over the radius. A squircle replaces that join with a single curve whose bend ramps up gradually and peaks at the corner, so there is no point where anything jumps. Mathematically it is a superellipse, the family of shapes given by taking the ellipse equation and raising the exponent above two, which is a way of saying the shape sits somewhere between a circle and a square and you pick where. In curve terms, a plain radius is G1 continuous and a squircle is G2, and that is the whole difference the eye is reacting to.

The shape is older than the software. Piet Hein worked out the superellipse in 1959 for Sergels torg in Stockholm, where a roundabout had to be neither a circle nor a rectangle, and the same shape turned up on tables, plates, and eventually the outline of an iOS app icon when Apple redrew the icon grid for iOS 7. Apple’s version is not quite Hein’s equation, it is a hand tuned set of Bezier curves, which is why matching it exactly took the community several attempts and why the values get published as icon templates rather than as a formula. It is exposed to developers as a continuous corner style rather than as a number, and Figma offers the same thing as a corner smoothing slider, where roughly 60 percent is the iOS look.

The web has been slower. border-radius is defined in terms of elliptical arcs, so it cannot make this shape at all, and the workarounds have all been expensive: an SVG path or clip-path: path() at a fixed size, a mask image, or a paint worklet. CSS now has an answer in corner-shape, which sits beside border-radius and accepts squircle or a superellipse() exponent, letting the same declaration keep the border, the shadow, and the background clip that a hand drawn path throws away. Chromium shipped it first and it degrades to an ordinary radius where it is missing, so it is usable as a progressive refinement rather than as a dependency.

Whether it is worth the trouble depends entirely on size. At a sixteen pixel icon or a six pixel input radius, nobody can tell, and reaching for a clip path there is cost with no return. It earns its place where the corner is large relative to the shape and the eye has time to look at it: app icons, avatars, large media thumbnails, the outer shell of a phone mockup, big feature cards. It also has a real practical cost worth knowing about. A plain radius clips text, shadows, and children for free, while a masked or clipped squircle usually creates its own layer and can soften the edge it is trying to perfect.