Squircle

A squircle is the rounded rectangle Apple uses across its whole interface, from app icons to buttons to sheets. 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

What went wrong first

I wanted a real squircle. The real shape is a superellipse2, a bit of maths you can compute a path from3. Then I researched it online and found Skiper UI and other libraries4. They use a cheaper trick: blur the element, then snap it back to a hard edge.

I built this one together with an AI agent. We made a few examples, but the difference between them was too small to see. A squircle and a rounded corner look almost the same at a glance, so a picture of the result proves nothing. That is where the loupe and the toggle came from. I wanted readers to interact with it and see what actually happens.

The blur trick

A Gaussian blur rounds everything, corners hardest of all. 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>

Zoomed in on one corner

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, and the dashed line is where a plain border-radius stops. The squircle sits a hair outside it the whole way round, and that little push is the whole thing. Flip the toggle up top and you can watch the cards swell into shape and back.

What the filter can and can't do

It is a cheat, not a true superellipse, and the corners are only approximate. For a filled element it is still a convincing squircle for five lines of SVG. 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.

I wouldn't use the filter in a real app. With the new CSS spec below, I would.

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.