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.

The real shape is a superellipse - a bit of maths you can compute a path from - but there is a cheaper trick, floating around in plenty of libraries online: 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 - 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 - a card, a sheet, a button, a thumbnail - because it is just a filter you drop onto whatever you already have.