Why Apple's Rounded Corners Look More Refined: Continuous Curvature Rounded Corners (Squircle) from Superellipse to CSS Implementation

Author: ENCI

Tags: CSS, Design

Core conclusion: You ask AI to make a card, adjust the corner radius to match Apple's, and it still looks "harder". The trouble is at the joint where the straight line enters the arc. A normal rounded corner is a straight line directly joined to a quarter circle arc; at the joint, curvature jumps from 0 to maximum in an instant, like snapping the steering wheel fully as you enter a turn. Apple uses continuous curvature rounded corners (squircle): it starts bending gradually from the straight line, passes through the middle, and slowly straightens out. Curvature transitions smoothly throughout, looking much softer. Mathematically, this shape is a superellipse, formula $|x/a|^n + |y/b|^n = 1$, where $n=4$ with equal axes is the squircle. In 2013, iOS 7 switched icons to this shape; in 2018, a Figma engineer wrote a long post on recreating it. Now the web has a new syntax corner-shape: squircle, and Chrome already supports it. When asking AI to build UI, explicitly say "rounded corners must use continuous curvature" instead of just "bigger radius".

Table of Contents

• 1. One-sentence conclusion
• 1. Where the trouble lies: the joint between straight line and arc
• 1. Curvature Discontinuity: why normal rounded corners feel "hard"
• 1. Continuous Curvature: the truth behind Apple's "soft" corners
• 1. Mathematical essence: the superellipse
• 1. Historical thread: from iOS 7 to Figma's recreation
• 1. Making AI do it right: don't just say "bigger radius"
• 1. Web implementation: the new corner-shape syntax
• 1. Complete runnable code (CSS + SVG demo)
• 1. Cheat sheet: symptom → cause → solution
• 1. Judgment call to wrap up

1. One-sentence conclusion

Let's build an intuition 🎭: A normal rounded corner is like "jerking the steering wheel fully as you approach an intersection", and the passenger gets thrown. A continuous curvature rounded corner is like "an experienced driver slowing down in advance, turning the wheel gradually, and straightening out after the middle of the turn", smooth the whole way. The difference between "being thrown or not" is the whole secret behind why Apple's rounded corners look more refined.

So remember three things:

• Root cause: In a normal rounded corner, at the "straight line ↔ arc" joint, curvature jumps from 0 to maximum instantly, looking "hard".
• Cure: Continuous curvature rounded corners let curvature transition smoothly, looking "soft"; mathematically this is a superellipse.
• In practice: Use corner-shape: squircle on the web; when instructing AI, directly say "continuous curvature rounded corners".

In one sentence: Whether rounded corners look good depends not only on the radius but on how curvature changes — this is the dividing line between Apple and the "ordinary AI card".

2. Where the trouble lies: the joint between straight line and arc

Look at how a normal rounded corner is drawn:

• A normal rounded corner is simply a straight line directly joined to a quarter circle arc; the radius determines how round the arc is.
• Mathematically, a straight line has curvature 0 (it doesn't bend), and an arc has maximum curvature from its very first point (it bends constantly).
• So at this "straight line ↔ arc" joint, curvature jumps from 0 to its maximum in an instant — that's the root of "hardness".

Ask AI to make a card's corners bigger and more refined, and it will only increase the radius — but that abrupt jump at the joint remains, so even with the same numbers it still looks harder than Apple's.

Using an analogy 🎭: A normal rounded corner is like "a straight road that suddenly hits a sharp curve" — no matter how round the curve is drawn, the direction changes abruptly the moment you enter. You feel it's not smooth; the problem isn't that the curve isn't round enough, it's that the transition from straight to curved is too sudden.

⚠️ Key insight: Corner radius only determines "how much it bends", not "how smoothly it bends". No matter how large the radius, as long as curvature jumps at the joint, it looks "hard".

3. Curvature Discontinuity: why normal rounded corners feel "hard"

Let's explain the mathematical mechanism of "hardness" clearly; don't worry, it's intuitive.

Curvature measures "how much a line bends": a straight line has curvature 0, and an arc has constant curvature (equal to the reciprocal of the radius, $1/r$).

For a normal rounded corner, the change at the joint is:

• Straight segment: curvature = 0 (no bend)
• The instant it enters the arc: curvature = $1/r$ (immediately reaches maximum bend)

There is no transition — curvature jumps from 0 to $1/r$ directly. Mathematically this is called curvature discontinuity, also known as $G^1$ continuity (which only guarantees tangent direction is continuous, not curvature).

• $G^1$ continuity: guarantees only "direction" smoothness (tangent direction), but the "acceleration of bending" jumps.
• The human eye can detect this "acceleration jump" — which is why normal rounded corners, even with large radii, still feel stiff.

Using the driving analogy 🎭: Curvature is like "steering wheel angle". A normal rounded corner is "the steering wheel instantly goes from 0 to maximum", and passengers get thrown. That's why it's "hard".

4. Continuous Curvature: the truth behind Apple's "soft" corners

Apple's rounded corners solve exactly this "curvature jump". They are continuous curvature corners, officially called squircle (Square + Circle).

Their drawing method is completely different:

• Bend in gradually from the straight line: at the joint, curvature increases from 0 gradually, not instantly jumping to maximum.
• After the middle, straighten out gradually: curvature returns to 0 smoothly, meeting the straight line without a break.
• Curvature changes continuously throughout, achieving $G^2$ continuity mathematically (both tangent direction and curvature are continuous).

This is exactly what engineering does in the real world: railways and highways build curves with a "gradually bending transition curve" (like a spiral easement) instead of going straight into a circular arc — precisely so passengers aren't thrown and trains don't derail.

Using an analogy 🎭: A continuous curvature corner is "an experienced driver entering a turn" — slowing down in advance, turning the wheel steadily, then gradually straightening out after the apex; the whole ride is smooth, and passengers barely feel any "jerk" from the turn.

💡 So the "refined feel" of Apple's corners essentially applies physics' "smooth transition" principle to vision — eyes, like the body, dislike "sudden acceleration changes".

5. Mathematical essence: the superellipse

The mathematical shape behind continuous curvature corners comes from the superellipse — also called the Lamé curve (named after French mathematician Gabriel Lamé). Formula:

$$|x/a|^n + |y/b|^n = 1$$

• $a$, $b$ are the horizontal and vertical semi-axis lengths;
• $n$ is the exponent, which determines the shape:
  • $n = 2$: a standard ellipse (a circle if $a=b$)
  • $n > 2$: a square / rectangle with rounded corners (the larger the exponent, the squarer the corners)
  • $n \to \infty$: degenerates to a pure square

And the squircle is the special case where $a = b$ and $n = 4$ — this is the mathematical prototype behind iOS icons and Figma's smooth corners.

Why does $n=4$ achieve "continuous curvature"? Because when $n > 2$, the superellipse has curvature exactly 0 at the points where it meets the axes (e.g., $x=\pm a$, $y=0$), so it naturally achieves $G^2$ continuity when joining a straight line — no extra transition segment is needed. That is the mathematical basis of "continuous curvature rounded corners".

Using an analogy 🎭: A superellipse is like "a relative of the circle", and the exponent $n$ is that "relative's roundness knob" — set it to 4, and you get Apple's comfortable "square-within-round, round-within-square" shape.

References:

• What is a Squircle? -- Squircle.js ⭐worth reading
• The Squircle Formula: Superellipse Math Explained -- Squircle.js ⭐worth reading

6. Historical thread: from iOS 7 to Figma's recreation

Continuous curvature rounded corners aren't new, but the last decade saw two waves of interest in UI design:

• 2013, iOS 7: Apple switched icons to the squircle shape, and designers quickly noticed it differed from ordinary rounded corners — "same numbers, but it just looks smoother".
• 2018, a Figma engineer wrote a long post: dedicated to recreating Apple's corners. They first tried the superellipse formula and found it didn't quite match (Apple doesn't use a single superellipse; each corner is fitted with a segment of a curve).
• Final approach: Figma used piecewise curves to fit Apple's shape corner by corner — this is the origin of the "smooth corner" slider you see in Figma today.

This history tells us two things:

1. Apple's shape is a "custom curve", not a simple formula — to replicate it exactly, you need piecewise fitting.
2. But "continuous curvature" is its essential feature — once you understand that, even a superellipse approximation can achieve 90% of the effect.

💡 Takeaway for ordinary designers / AI users: You don't need to replicate Apple precisely; just achieve "continuous curvature" and the visual quality will already be a notch above ordinary rounded corners.

References:

• Apple Continuous Corners and Concentric Corner Radius: CSS, SwiftUI, Tailwind Implementation -- ZeroOne ⭐worth reading

7. Making AI do it right: don't just say "bigger radius"

This is the most practical advice for people using AI to build interfaces. By default, AI-generated pages use ordinary rounded corners — straight line joined to arc.

• Tell AI "make the corners bigger" → it only increases the border-radius value; the abrupt jump at the joint remains.
• Tell AI "make the corners more refined" → it still only changes the radius, because it doesn't know "refined" means "continuous curvature".
• The right move: explicitly say "rounded corners must use continuous curvature" — the term is precise enough for AI to understand and implement.

Similarly, when building iPhone apps:

• Apple's development tools (Xcode / SwiftUI) already have this option, officially called continuous corner radius.
• When using design tools yourself, push the smooth-slab and corner radius sliders up — Figma's smooth slider, or the continuous corner option in your tool.
• On the web, use the corner-shape: squircle covered in section 8 below.

Using an analogy 🎭: Giving AI instructions is like "telling a renovator your requirements" — say "paint it whiter" and they'll just apply more coats of white paint; say "I want the matte finish of latex paint" and they know what to adjust. "Continuous curvature" is the keyword that makes AI actually understand.

8. Web implementation: the new corner-shape syntax

To implement continuous curvature rounded corners on the web, there's a new CSS property named squircle (square + circle).

• The key addition is the corner-shape property, which controls the geometry of the corner, while border-radius continues to control size.
• Key values: corner-shape: squircle (squircle shape) or corner-shape: superellipse(...) (specify a superellipse exponent).
• Browser support: Chrome already works; Safari (Apple) is still in beta.
• Graceful degradation: Unsupported browsers automatically fall back to ordinary rounded corners; the page won't break — so you can use it safely, the refined effect just only shows in supporting browsers.

⚠️ Note: border-radius by itself always draws arc corners (circular or elliptical arcs); it can't become a squircle on its own. corner-shape is the key to changing "shape". If radius is 0, setting corner-shape alone also has no effect.

A practical detail: with the same value, a squircle looks "squarer", because a superellipse's curvature near the corner changes gradually rather than being "bulging" like a circular arc. So when using squircle, you can increase the value compared to a normal rounded corner to get closer to the roundness you're used to visually.

References:

• Squircles in CSS: corner-shape, superellipse() and Browser Support -- Squircle.js ⭐worth reading
• border-radius CSS property -- MDN

9. Complete runnable code (CSS + SVG demo)

Below is a complete, runnable snippet — an HTML page that compares ordinary rounded corners against continuous curvature corners (squircle), plus a hand-drawn superellipse SVG, so you can visually see the difference between "curvature jump" and "continuous curvature". Save it as squircle.html and open it in a browser.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Squircle Continuous Curvature Demo</title>
<style>
  body { font-family: sans-serif; display: flex; gap: 40px; padding: 40px; }
  .card { width: 160px; height: 160px; display: flex;
          align-items: center; justify-content: center; color: #fff;
          font-weight: bold; text-align: center; }
  .normal { background: #999; border-radius: 32px; }            /* normal: straight-to-arc, curvature jump */
  .sq     { background: #ff4d2e; border-radius: 48px;           /* continuous curvature: larger value, squarer look, smooth */
            corner-shape: squircle; }                           /* Chrome supports; others gracefully fall back */
</style>
</head>
<body>
  <div>
    <div class="card normal">normal<br>curvature jump</div>
    <p>border-radius: 32px</p>
  </div>
  <div>
    <div class="card sq">Squircle<br>continuous curvature</div>
    <p>corner-shape: squircle<br>border-radius: 48px</p>
  </div>
</body>
</html>

How to read this code: .normal uses only border-radius — an ordinary corner where curvature jumps from 0 to $1/r$ at the joint. .sq adds corner-shape: squircle, and to compensate for the "squarer" look of a squircle, the radius is increased from 32 to 48. Open it in Chrome and you'll clearly feel the right card is "smoother, closer to Apple". Open it in an unsupported browser, and it just falls back to ordinary rounded corners — nothing breaks. That's the "graceful degradation" from section 8.

10. Cheat sheet: symptom → cause → solution

Symptom	Cause	Solution
Corner radius is the same as Apple's, but still looks hard	Normal corners join straight to arc, curvature jumps at the joint	Switch to continuous curvature corners (squircle)
Asking AI for a card, "bigger corners" still looks bad	AI only changes radius; the jump remains	Explicitly say "continuous curvature rounded corners"
Want Apple-style corners on the web	border-radius can only draw arcs	Use corner-shape: squircle
Squircle feels too "square"	Superellipse is squarer than an arc	Increase the border-radius value
Worried about browser support	corner-shape is new tech	Unsupported browsers fall back automatically; the page never breaks

11. Judgment call to wrap up

When to use continuous curvature corners: you're building an interface where visual quality matters — app icons, cards, buttons, brand-forward pages — and your browser / environment supports it (Chrome) or you accept graceful degradation. When not to bother: you're building a purely functional backend, a data-dense page where corners are just light decoration. In that case, ordinary border-radius is perfectly adequate; no need to introduce new tech for such a tiny visual difference. The single criterion: Is this corner a focal point of the user's visual attention? If yes, it's worth going squircle; if no, ordinary rounding is fine.

This column, Full-Stack Development, covers frontend and backend engineering, UI design, and developer toolchains. Each piece comes with runnable code and practical explanations, continuously updated. Want to avoid detours in interface and engineering details? Subscribe on the column page.

References (comprehensive):

• What is a Squircle? -- Squircle.js ⭐worth reading
• The Squircle Formula: Superellipse Math Explained -- Squircle.js ⭐worth reading
• Squircles in CSS: corner-shape, superellipse() and Browser Support -- Squircle.js ⭐worth reading
• Apple Continuous Corners and Concentric Corner Radius: CSS, SwiftUI, Tailwind Implementation -- ZeroOne ⭐worth reading
• border-radius CSS property -- MDN