The smooth curve
Why normal rounded corners feel wrong
Normal rounded corners have a sudden jump from a straight line straight into a circle. It creates a tiny, ugly bump that your eyes can feel. A squircle fixes this. It slowly and gently bends into the corner, making the shape perfectly smooth and high-end.
Wait, what exactly is a Squircle?
Think of it as a shape that lives right in the middle of a square and a circle. Apple uses this exact shape for all their iPhone app icons and the actual physical corners of their devices.
In math, it is called a superellipse. While a normal circle is built on a simple rule, the squircle uses a slightly heavier math formula:
Don't worry about the math! All it means is that we can control exactly how the line bends. Instead of snapping into a curve, it blends into it smoothly. This removes the sharp "corner joints" that look cheap in digital design.
The Eye Test
See how the sharp start of a normal curve compares to the smooth flow of a squircle.
Standard RadiusHarsh Stop
Hover over the box above. Look at where the red line hits the corner. The straight line turns into a circle all at once. Your eye catches this sudden change, making it feel boxy and cheap.
The SquirclePerfect Flow
Because of the special shape, the curve starts bending much earlier. There is no sudden stop. It flows perfectly around the edges, tricking your brain into feeling a soft, organic shape.
The Overlap Proof
When we put them right on top of each other, the difference is clear.
The red outline is a standard rounded box. See how far out its corners push? It looks heavy and stiff.
The white block is the squircle. It shaves off those heavy, sharp edges to create a lighter, softer feel. It simply looks better.
How to build it
Here is the ready-to-use code. You can copy and paste this directly into your own project.
1. The SVG Mask Method (Best for Cards & Images)
const squircleMask = `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100,0 C22,0 0,22 0,100 C0,178 22,200 100,200 C178,200 200,178 200,100 C200,22 178,0 100,0 Z' fill='black'/%3E%3C/svg%3E")`;
<div
className="w-48 h-48 bg-white"
style={{
WebkitMaskImage: squircleMask,
maskImage: squircleMask,
WebkitMaskSize: '100% 100%',
maskSize: '100% 100%'
}}
/>
2. The Clip-Path Method (Best for Buttons)
<button
className="px-6 py-4 bg-white text-black"
style={{
clipPath: "path('M 12,0 L calc(100% - 12px),0 C calc(100% - 4px),0 100%,4 100%,12 L 100%,calc(100% - 12px) C 100%,calc(100% - 4px) calc(100% - 4px),100% calc(100% - 12px),100% L 12,100% C 4,100% 0,calc(100% - 4px) 0,calc(100% - 12px) L 0,12 C 0,4 4,0 12,0 Z')"
}}
>
Click Me
</button>