The magic of Squircles in CSS, Illustrator and Figma

If you’ve ever looked at an app icon on your phone and thought “that’s not quite a rounded rectangle,” you’re right. It’s probably a squircle, and once you know what they are, you’ll start seeing them everywhere.

What Is a Squircle?

A squircle is a shape that sits somewhere between a square and a circle. The name is literally a mix of the two. But here’s the thing that makes squircles special: they’re not the same as a rounded rectangle / square.

A rounded rectangle takes a square and sticks quarter-circles onto the corners. The result is a shape where the straight edge abruptly transitions into the curve. There’s a subtle but noticeable “pinch” where the flat side meets the rounded corner.

A squircle is a shape that blends a square and a circle. Unlike a simple rounded rectangle (which uses circular arcs for corners), a squircle uses a smooth continuous curve that transitions gradually from straight edges into corners.

Mathematically, squircles are often described using superellipse equations, but you don’t need advanced math to use them in practice.

Why Not Just Use border-radius?

Standard CSS rounded corners use perfect circular arcs. This creates a sharp curvature change at the edges. Squircles, by contrast:

• Feel more organic
• Have more balanced curvature
• Look less boxy and less bubbly
• Scale better across different sizes

Apple popularised the term “continuous curvature” to describe this property, and it’s a key part of their design language across iOS, macOS, and their hardware.

Why Squircles Matter in Design

The difference between a rounded rectangle and a squircle might seem trivial, but designers obsess over it for good reason. The human eye is remarkably good at detecting discontinuities in curves. That abrupt transition in a rounded rectangle feels slightly mechanical, even if you can’t articulate why.

Squircles feel more natural and polished. They’re the reason Apple’s app icons look so refined, and why high-end product design, from speakers to car dashboards, increasingly favours this shape. It communicates care and intentionality.

How to Create Squircles in CSS

For years, achieving true squircles in CSS required hacks, SVG masks, clip-paths, or JavaScript libraries. That’s changed. The corner-shape property has landed in browsers and it makes squircles a two-liner.

The New Way: corner-shape: squircle

This is how you do it:

:root {
  --brm: 1; /* normal border-radius multiplier */
}

@supports (corner-shape: squircle) {
  :root {
    --brm: 4; /* border-radius multiplier for browsers that support squircles */
  }
}

.squircle {
  border-radius: calc(30px * var(--brm));
  corner-shape: squircle;
}

:root {
  --brm: 1; /* normal border-radius multiplier */
}

@supports (corner-shape: squircle) {
  :root {
    --brm: 4; /* border-radius multiplier for browsers that support squircles */
  }
}

.squircle {
  border-radius: calc(30px * var(--brm));
  corner-shape: squircle;
}

Progressive Enhancement

The beauty of corner-shape is that it degrades gracefully. Browsers that don’t support it simply ignore the property and render standard rounded corners via border-radius. Your layout doesn’t break, you just get the classic look instead of the polished one.

One thing to watch: a squircle with the same border-radius value will appear to have a slightly smaller corner than a standard rounded corner. If you’re progressively enhancing, you might want to bump up the radius for the squircle version.

In this example above, we create a variable –brm (Border Radius Multiplier), with a value of 1 for browsers that don’t support corner-shape. And wrapped in a @supports rule, we add a bigger multiplier, for browsers that support corner-shape. This way, you achieve a more consistent look across all browsers.

That’s it. The border-radius controls how far the curve extends, and corner-shape: squircle changes the geometry from a standard circular arc to a smooth superellipse. Borders, shadows, outlines, and backgrounds all follow the shape automatically.

Browser support: corner-shape shipped in Chrome 139 (and other Chromium-based browsers like Edge and Opera). Firefox and Safari don’t support it yet at the time of writing, so you’ll want a fallback strategy.

Keep an eye on browser support: https://caniuse.com/?search=corner-shape

How to Create Squircles in Adobe Illustrator

Illustrator doesn’t have a native “squircle” tool, but here is how you can manually do it.

Step 1

Press and hold the line segment tool until the dropdown shows up, and then select the arc tool.

Step 2

Then right click once in the artboard, and when the Arc Segment Tool Options show up, change the slope to a number between 80 and 95. The right number is up to you.

Step 3

Click ok and you will end up with a corner just like this one. Now you can make it bigger or smaller, depending on what you want to achieve.

Step 4

Now that you have your corner shape, all you have to do is copy it and rotate it a couple of times until you have 4 corners. Once you have the 4 corners, just connect them to complete your shape. Here are some examples.

How to Create Squircles in Figma

Figma has arguably the best built-in support for squircles among mainstream design tools.

Figma’s killer feature here is corner smoothing, which is essentially the continuous curvature that turns a rounded rectangle into a squircle:

Step 1

Draw a rectangle with the Rectangle Tool (R).

Steps 2, 3, 4 and 5

• Set a corner-radius in the right panel (e.g., 60).
• Click the corner radius value to open the detailed corner settings.
• Set Corner smoothing to a value between 0% and 100%. At 60%, you get something very close to Apple’s iOS icon shape. At 100%, you get a fully smooth superellipse.

That’s it. Figma handles the math for you, and the result is a true continuous-curvature shape.

iOS App Icon Preset

If you’re specifically designing iOS app icons:

1. Create a 60×60, 120×120, or 1024×1024 frame (depending on your target size).
2. Set the corner radius to the appropriate Apple guideline value (for the 1024px icon, that’s roughly 224px).
3. Set corner smoothing to 60%, this matches Apple’s iOS icon mask almost exactly.

Using a Plugin

For even more control, the Squircle plugin (searchable in Figma’s community plugins) lets you generate superellipses with a specific exponent. This is useful if you need to match a precise mathematical curve rather than Figma’s smoothing approximation.

Wrapping Up

Squircles are one of those details that separate good design from great design. The continuous curvature is subtle, but it’s the kind of subtlety that makes a product feel considered and polished.

The tooling has finally caught up to the math. Figma makes it trivially easy with corner smoothing, Illustrator requires a bit more manual effort, and CSS, the longtime holdout, now has native squircle support via corner-shape: squircle in Chromium browsers. With graceful degradation to standard rounded corners in other browsers, there’s no reason not to start using it today.