How to Make a Squircle in Figma
Make a true squircle in Figma in four steps using the corner smoothing slider — including the exact 60% iOS setting, app icon proportions, SVG export, and how to match the shape on the web.
Articles about squircles, smooth corners, and modern UI design.
Make a true squircle in Figma in four steps using the corner smoothing slider — including the exact 60% iOS setting, app icon proportions, SVG export, and how to match the shape on the web.
Can you make a squircle in pure CSS yet? A practical guide to the new corner-shape property and superellipse() value, current browser support in 2026, and how to ship smooth corners everywhere today.
A rectangle with rounded corners is called a rounded rectangle. But depending on how the corners curve, it might be a stadium, a pill, a squircle, or a superellipse. Here is what each shape is named and how to tell them apart.
A squircle is a shape between a square and a circle. Learn what squircles are, their history, the math behind them, and why they're used in modern UI design.
Understand the visual and mathematical differences between squircles and rounded rectangles, including corner continuity and when to use each shape.
Discover how and why Apple adopted squircles for iOS app icons, hardware design, and UI elements, replacing traditional rounded rectangles.
The squircle equation is x⁴ + y⁴ = r⁴ — a special case of the superellipse formula |x/a|ⁿ + |y/b|ⁿ = 1. Learn where the formula comes from, how the exponent shapes the curve, and how it translates to corner smoothing in UI design.
Why CSS border-radius can't create squircles, the approaches to implementing smooth corners on the web, and how squircle-js solves the problem.
Bridge the gap between Figma's corner smoothing and web development. Learn how squircle-js uses the same algorithm to match Figma designs.