You’ve seen it every single day, probably for the last decade, and you might not even know its name. It’s on your iPhone home screen. It’s the shape of your favorite app icons. It’s the contour of the Apple Watch. It isn't a square with rounded corners, even though that’s what your brain wants to call it. It’s the squircle.
This shape is basically the "uncanny valley" of geometry. It’s a mathematical freak of nature that feels more organic than a polygon but more disciplined than a circle. If you try to recreate it by just taking a square and hacking the corners off with a compass, you’ll fail. Your eye will catch the "tangency break"—that jarring moment where the straight line suddenly snaps into a curve. The squircle doesn't do that. It’s a seamless transition. It is so close that is a shape you’d recognize as a square, yet it defies the very definition of one.
The Math Behind the Curve
Honestly, most people think a rounded rectangle and a squircle are the same thing. They aren't. Not even close. A standard rounded rectangle is a "geometric bastardization." It’s composed of four straight lines and four arcs of a circle. If you look at the point where the straight edge meets the curve, there is a mathematical discontinuity in the curvature. It’s like driving a car and suddenly jerking the steering wheel to a fixed position.
The squircle is different. It relies on something called a Lamé curve, named after the French mathematician Gabriel Lamé. The formula looks like this:
$$\left| \frac{x}{a} \right|^n + \left| \frac{y}{b} \right|^n = 1$$
When $n$ equals 2, you have a circle. When $n$ gets really high, you get a square. But when $n$ is somewhere around 4 or 5? That’s where the magic happens. That’s the squircle. Because the formula is continuous, the curvature changes gradually. There is no "start" or "stop" to the corner. It just flows. Designers call this curvature continuity or "G2 continuity." It’s why high-end car bodies look sleek and cheap plastic toys look, well, cheap.
Why Apple Obsesses Over This
Apple didn't invent the squircle, but they certainly turned it into a religion. Before iOS 7, app icons were basically just rounded rectangles. They were fine. Nobody complained. But when Jony Ive and the design team overhauled the interface, they shifted to a "continuous curvature" shape.
💡 You might also like: Inside an Air Conditioner: Why Your Unit Actually Cools (and Why It Fails)
If you zoom in really close on an iPhone icon today, you’ll see the straight edge isn't actually straight for very long. It starts curving almost immediately. This is why an iPad feels "softer" in your hand than a generic tablet with the same dimensions. It’s a psychological trick. Our brains are wired to perceive sharp breaks in geometry as man-made and potentially "dangerous" (think thorns or jagged rocks), while continuous curves feel natural, like a river stone.
It’s Everywhere in Industrial Design
It isn't just tech. Look at a high-end kitchen faucet or the steering wheel of a modern Ferrari. You’ll find squircles. Designers use them because they solve a specific problem: light reflection.
When light hits a standard rounded rectangle, the reflection "breaks" at the seam where the curve meets the flat side. It creates a harsh, ugly line of glinting light. But on a squircle, the light rolls across the surface smoothly. It looks "premium." It looks expensive.
Microsoft tried to get in on the action with their "Fluent Design System," and even car manufacturers like Fiat have leaned into the aesthetic. The Fiat Panda, for instance, used the squircle as its primary design motif for years—from the dashboard to the steering wheel to the headlights. It was a way to make a cheap city car feel intentional and playful rather than just a box on wheels.
📖 Related: Getting Your Wall Mount TV 70 Inch Setup Right the First Time
The Problem With Coding Squircles
Here’s the thing: squircles are a nightmare for developers. Most CSS and design tools are built on the "border-radius" property. Border-radius creates a circular arc. It does NOT create a squircle.
To get a true squircle on a website, you often have to use SVG paths or complex masks. You can't just type border-radius: 20px and call it a day. This is why the web often feels "sharper" or "clunkier" than native mobile apps. Native iOS development uses a specific CALayer property called continuousCorners, which toggles the squircle math on or off. Without that specific bit of code, you’re just looking at a fancy square.
Misconceptions and the "Superellipse"
People often use the terms "squircle" and "superellipse" interchangeably. While a squircle is a type of superellipse, not every superellipse is a squircle. It’s a "rectangles and squares" situation.
A superellipse can be elongated into an oval-ish shape, whereas a squircle is specifically the version that stays roughly 1:1 in its aspect ratio. Some mathematicians argue that a "true" squircle must follow the $n=4$ exponent exactly. Others are more loose with the definition. Regardless of the pedantry, the goal remains the same: eliminating the visual "pop" of a corner transition.
Why Your Brain Prefers This Shape
There’s a concept in psychology called the Bouba/Kiki Effect. It suggests that humans map certain sounds to certain shapes. "Kiki" is sharp and jagged; "Bouba" is round and soft.
The squircle is the ultimate "Bouba."
📖 Related: Pictures of Dinosaurs Real: Why You’ve Probably Never Seen One (And What’s Actually in Your Feed)
It manages to be space-efficient like a square—you can stack app icons next to each other without wasting much room—while maintaining the friendly, approachable vibe of a circle. It’s the ultimate compromise in the history of geometry. It’s a shape that feels like it was grown rather than manufactured.
Actionable Insights for Designers and Makers
If you’re a creator, designer, or just someone who cares about aesthetics, you can start applying the logic of the squircle to your own work. It’s about moving past the "default" settings of your tools.
- Audit your tools: If you use Figma, look for the "Corner Smoothing" slider. Sliding that to 60% or 100% transforms a standard rounded rectangle into a squircle. Use it for buttons to make them feel more "integrated" into the UI.
- Watch the reflections: If you’re 3D modeling or physical prototyping, avoid 90-degree transitions. Always aim for G2 continuity if you want your product to catch the light like a premium smartphone.
- Don't overdo it: Squircles are great for containers and icons, but they can make a layout feel "mushy" if used for every single element. Contrast is still your friend.
- Code check: If you're a dev, explore the
smooth-cornersCSS property (though browser support varies) or use SVG masks to replicate the iOS look on the web.
The squircle is proof that the smallest details—literally a few pixels of curvature—can change how we feel about an object. It’s a shape that is so close to a square that it tricks you, but it’s the "trickery" that makes it beautiful.