跪拜 Guibai
← All articles
CSS · Design

Apple's Softer Corners Come From a Superellipse, and Chrome Now Renders Them Natively

By ENCI ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Designers can now specify Apple-style corner geometry with a single CSS declaration instead of SVG hacks or JavaScript libraries, and the graceful fallback makes it safe to adopt immediately. For anyone prompting AI to build UI, naming the term "continuous curvature" is the difference between a card that still looks off and one that matches Apple's softness.

Summary

The difference between Apple's refined corners and a typical UI card isn't the radius value — it's how curvature changes at the joint where a straight line meets the arc. Ordinary `border-radius` snaps curvature from 0 to its maximum instantly, which reads as "hard". Apple's corners, and the squircle shape that iOS 7 introduced in 2013, transition curvature smoothly throughout, achieving G2 continuity, and are mathematically a superellipse with $n=4$.

The web now has a native way to draw this shape: the `corner-shape` CSS property, with `corner-shape: squircle` as its headline value. It works in Chrome, falls back gracefully to ordinary rounded corners elsewhere, and pairs with `border-radius` for size. There's also a practical tip for AI-driven interface work: asking for "continuous curvature rounded corners" gets better results than just "bigger radius", because AI tools only know to change the radius value unless told otherwise.

Takeaways
— Ordinary CSS border-radius draws a straight line joined to a quarter circle arc, causing a curvature discontinuity (G1 continuity) that reads as visually rigid.
— Continuous curvature corners, known as squircles, transition curvature gradually from 0 to maximum and back, achieving G2 continuity and looking noticeably softer.
— The squircle is a special case of the superellipse with formula $|x/a|^n + |y/b|^n = 1$, where $n=4$ and $a=b$.
— iOS 7 adopted the squircle for icons in 2013; Figma engineers recreated Apple's exact shape in 2018 using piecewise curve fitting rather than a single superellipse.
— The new CSS property `corner-shape: squircle` is supported in Chrome, falls back gracefully to ordinary border-radius in other browsers, and needs a non-zero radius to work.
— When prompting AI for UI, explicitly requesting "continuous curvature rounded corners" produces better results than asking for "bigger radius", which AI handles by only increasing the border-radius value.
Conclusions

The article reframes a visual quality issue as a geometric one: the "hardness" of normal rounded corners comes from a curvature discontinuity at the join, not from the radius value, which explains why matching Apple's numbers still misses the effect.

Chrome's support for `corner-shape: squircle` makes the technique practical today, and the automatic fallback lowers the risk of adoption to essentially zero for any page that already uses border-radius.

AI tools respond to precise vocabulary: the same model that only increases radius when told "bigger corners" can implement continuous curvature when given the explicit term, suggesting that prompt precision often matters more than model capability.

Apple's actual shape is a custom piecewise curve, not a pure superellipse, but the article argues that approximating with n=4 achieves most of the visual benefit, which is a useful tradeoff for anyone not trying to pixel-match iOS.

Concepts & terms
Squircle
A portmanteau of square and circle, referring to a shape that has the characteristics of both. In design, it specifically denotes a rounded rectangle with continuously varying curvature (G2 continuity), making corners appear softer than ordinary circular arcs.
Superellipse
A generalization of the ellipse defined by $|x/a|^n + |y/b|^n = 1$. When $n > 2$ with $a = b$, it produces a square with rounded corners; $n=4$ is the squircle case that Apple's icons use.
Curvature continuity (G2)
A geometric smoothness condition where both the tangent direction and the curvature (rate of bending) are continuous along a curve. G2 continuity eliminates sudden changes in curvature, which is what makes Apple-style corners feel smooth rather than abrupt.
corner-shape
A new CSS property that controls the geometric shape of an element's corners. The value `squircle` draws a continuous-curvature rounded shape, distinct from `border-radius` which only sets the radius of a circular or elliptical arc. Chrome supports it; other browsers currently ignore it and fall back to normal rounding.
From the discussion
Featured comments
ENCI

The biggest takeaway from years of UI work: the so-called premium feel often lies not in the size of the parameters but in whether the transition is smooth. With the same 32px corner radius, a normal rounded corner is like jerking the steering wheel hard into a turn, while a squircle is like an experienced driver slowing down early, turning gradually, and straightening out after the apex. Do you pay special attention to curvature transition when tuning UI? A: I deliberately use continuous curvature. B: I stick with plain border-radius. Share in the comments 👇

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗