The standard CSS border-radius property has been a staple of web design for over a decade. But as our interfaces become more sophisticated, we're starting to see its limitations.
The Problem with Circular Arcs
Traditional border-radius uses circular arcs to round corners. While this works fine for simple cases, it creates a visual discontinuity where the curve meets the straight edge. This is because circular arcs only provide G1 continuity—the tangent is continuous, but the curvature changes abruptly.
Key Insight: G1 continuity means the curve is smooth, but the rate of curvature changes suddenly. This creates a subtle "kink" that our eyes can detect.
Enter Squircles
Squircles (superellipses) provide G2 continuity, meaning both the tangent and curvature are continuous. This creates a more organic, pleasing shape that feels more natural to the human eye.
The mathematical formula for a squircle is:
|x/a|^n + |y/b|^n = 1
Where n typically ranges from 4 to 5 for optimal visual results.
Perceptual Impact
Studies have shown that users perceive G2 continuous curves as more premium and refined. This is why Apple uses squircles extensively in iOS—from app icons to UI elements.
The difference is subtle but significant. Once you start noticing it, you can't unsee it.
Visual Comparison
Here's what the difference looks like in practice:
- Border-radius: Sharp transition at the curve-to-edge junction
- Squircle: Smooth, organic transition throughout
Implementation Challenges
The main challenge with squircles on the web is that CSS doesn't natively support them. We need to use either:
- SVG clip-paths - Best for static shapes
- Canvas rendering - Good for dynamic content
- CSS Houdini - Limited browser support
Our Squircle Generator tool makes this easy by providing production-ready code for all these approaches.
The web deserves better than circular arcs. It's time to embrace G2 continuity. For more insights on design systems, check out our engineering blog or explore our full suite of design tools.
Understanding Continuity in UI
In mathematics and computer-aided design (CAD), we talk about geometric continuity.
- G0 (Position): The lines meet at a point.
- G1 (Tangent): The lines meet and share the same direction, but there's a sharp change in how fast they curve.
- G2 (Curvature): The lines meet, share direction, AND their curvature changes gradually.
When you use a squircle instead of a standard border-radius, you're applying G2 continuity. This mimics how physical objects are machined or how natural forms (like river stones or fruit) are shaped. In a world of digital sharp edges, these "smooth" transitions provide a moment of visual relief, making your app feel more premium and approachable.