Why Apple's corners aren't rounded rectangles

Imagine driving along the edge of the shape. On the straight part, the steering wheel is centred. In the corner, it's turned.

Curvature is how far the wheel is turned. A straight line has curvature 0. A circle of radius r has curvature 1/r, and it's the same all the way round. Small circles have high curvature. You're turning hard.

border-radius joins a straight line to a quarter circle. The two meet at the tangent point, where they share a direction, so there's no visible corner. But the curvature goes from 0 to 1/r instantly. You'd be yanking the wheel from centred to turned in no time at all.

Mathematicians call this G1 continuity. The direction is continuous, but the curvature isn't. You can see that jump even if you can't name it. It tends to read as a faint kink where the corner starts, and it's easier to see on big, slow corners than on small ones.

A continuous corner turns the wheel gradually. Curvature starts at 0 on the straight edge, climbs smoothly, and comes back down. Now the curvature is continuous as well, which is called G2.

Road and railway engineers solved the same problem long ago. A train going from straight track into a circular bend would feel a sudden sideways jolt, so the track uses a transition curve whose curvature grows in proportion to the distance travelled. The demo uses that idea: ramp, hold the circle, ramp back.

// Curvature at distance s into the corner: ramp up over L,
// hold 1/r around the arc, ramp down over L.
const k = (s) => (s < L ? s / L / r : s <= L + La ? 1 / r : (T - s) / L / r);

// Walk the corner: turn by k·ds, then step forward by ds.
th += k(s) * ds;
x += Math.cos(th) * ds;
y += Math.sin(th) * ds;

You never write down the shape directly. You write down how hard to steer, and the outline falls out of that.

Apple calls this a continuous corner. In Core Animation it's cornerCurve = .continuous, and in SwiftUI it's RoundedRectangle(cornerRadius:style: .continuous), which Apple's docs describe as "continuous curvature rounded rect corners". Both arrived in iOS 13.

Apple doesn't publish the exact curve. People often call it a squircle or a superellipse, but when Figma's team studied it for their corner smoothing feature, they found a pure superellipse "wasn't quite right". The iOS shape is three Bézier curves per corner.

Figma's own version has the same structure as the demo: the curvature ramps up, holds flat around a circular arc, then ramps down. The smoothing slider shrinks the arc and lengthens the ramps. Their post says 60% "just about nails the iOS shape", and the iOS button in Figma sets exactly that.

A ramp has to start somewhere, and it starts further back along the edge than the circle did.

At 60% in the demo, with the tightest radius kept the same, the corner begins 1.50 times the radius from the end of the edge. A circular corner begins at exactly 1×. For comparison, PaintCode's reverse-engineered iOS 7 rounded rectangle starts its curve 1.53 times the radius from the corner.

Now switch the demo to "Keep the length" and drag again. If the corner can only use the same stretch of edge as the circle, the ramps eat into the room the arc had, so the turn in the middle has to get tighter. The tightest radius drops. The corner looks smaller and sharper, even though the number you typed hasn't changed.

That's the part that catches people out. Swap a circular corner for a continuous one at the same value, and it looks like you made the radius smaller. To look the same size, the smooth corner needs more edge to work with.

CSS now has a property for this. corner-shape changes the curve that border-radius draws, and borders, shadows and outlines all follow it.

.card {
  border-radius: 44px;
  corner-shape: squircle; /* same as superellipse(2) */
}

It uses a different family of curves from Apple's: the superellipse, or Lamé curve, |x|ⁿ + |y|ⁿ = 1. When n is 2, that's a circle. In CSS, superellipse(K) uses n = 2^K, so round is superellipse(1) and squircle is superellipse(2), which is n = 4. Chrome's write-up of how they built it covers the details.

The useful property is that for any n above 2, the curvature at both ends of the corner is exactly 0. So a squircle meets the straight edge without a step, which is the whole point.

But it fills the radius box differently, so the same border-radius gives a very different corner. Compare them below.

At the same radius, the squircle hugs the corner. On the diagonal, it sits 0.22 radii in from the corner, where a circle sits 0.41 radii in. Its tightest point has 2.5 times the circle's curvature. So for a squircle to cut as deep into the corner as a circle, it needs about 1.84 times the radius. That's where the 44px above comes from, against 24px for a plain circle.

The catch is support. As of November 2026, corner-shape ships in Chrome and Edge 139 and later. It's only in preview builds of Firefox and Safari, per MDN's compatibility data. In other browsers it's ignored and you get the normal circular corner, which is a fine fallback.

If you need it everywhere today, you draw the outline yourself. Use an SVG path, or clip the element with clip-path: path(...), like the fallback in the demo. Both have real costs. The path is in fixed pixels, so it has to be regenerated whenever the element resizes. And a clip cuts off anything outside it, including your box-shadow and focus ring.

Apple's 2025 redesign leans on this even harder. In WWDC25's design system session, Apple says shapes nest "by aligning radii and margins around a shared center", and "concentric shapes calculate their radius by subtracting padding from the parent's." SwiftUI's new ConcentricRectangle does that maths for you, all the way out to the curve of the screen.

You can do the same in CSS: an inner radius equals the outer radius minus the padding. Strictly, that rule is only exact for circles. A circle drawn a fixed distance inside a circle is still a circle, with the same centre. A continuous curve offset inwards isn't quite the same curve. At UI sizes the difference is far too small to see, so the subtraction is still the rule to follow.

The radius was never really the thing people were reacting to. What they notice is the moment the edge starts to turn, and whether it eases into the turn or snaps into it.