Squircle

A squircle is the rounded rectangle Apple uses across its whole interface, from app icons to buttons to sheets, and it is not the one you get from border-radius. A border-radius rounds only the corners - each one a quarter circle bolted onto a straight edge, with a hard little join where the two meet. A squircle rounds the whole shape: the curve starts before the corner and keeps going after it, so the outline flows the entire way around with no seam. Nothing turns a sharp corner, which is exactly why a grid of squircles looks calmer than the same grid merely rounded.1

The real shape is a superellipse2 - a bit of maths you can compute a path from3 - but there is a cheaper trick, floating around in plenty of libraries online4: blur the element, then snap it back to a hard edge. A Gaussian blur rounds everything, corners hardest of all, and an alpha ramp steep enough to turn that blur back into a solid shape keeps the softened corners while letting the whole edge push out a touch. That is the entire effect: one feGaussianBlur, one feColorMatrix on the alpha channel, and an feBlend to drop the sharp original back on top. It is a plain CSS filter, with no geometry to compute and nothing to redo when the box resizes.

<filter id="squircle">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  {/* alpha * 20 - 7: steep enough to turn the blur back into a hard, melted edge */}
  <feColorMatrix in="blur" mode="matrix"
    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7" result="goo" />
  <feBlend in="SourceGraphic" in2="goo" />
</filter>

The change is small, so it is worth zooming right into one corner to see it:

The solid line is the edge the filter actually produces; the dashed line is where a plain border-radius stops. The squircle sits a hair outside it the whole way round - that little push is the whole thing. Flip the toggle up top and you can watch the cards swell into shape and back.

It is a cheat, not a true superellipse, and the corners are only approximate - but for a filled element it is a convincing squircle for five lines of SVG. And it is not only app icons: anything with a border-radius takes the same treatment, whether that is a card, a sheet, a button or a thumbnail5, because it is just a filter you drop onto whatever you already have.

Coming to CSS

The filter is a stopgap, though, and it will not be needed much longer. CSS is growing a corner-shape property6 that names the corner geometry outright: round is today's default, with squircle and bevel joining it - and a superellipse() function underneath for everything in between. It needs a border-radius to act on, and then a real squircle, an exact superellipse rather than an approximation, is two lines with no SVG at all:

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

Support is still landing and it is not in every browser yet, so the filter stays the portable option for now. But the moment corner-shape is everywhere, this whole experiment collapses into those two lines.