What makes a squircle different from a rounded square (border-radius)?

border-radius joins a straight edge to a circular arc with a sudden change in curvature at the point they meet, which the eye reads as a subtle kink. A squircle is a superellipse — |x|ⁿ + |y|ⁿ = 1 — where the curve changes continuously all the way around, the same continuous-corner shape Apple uses for iOS app icons, so it looks smoother at the same corner size.

How does this tool draw a superellipse with only clip-path?

There's no native CSS superellipse primitive, so this tool samples 48 points around the mathematical curve x = sign(cos t)·|cos t|^(2/n), y = sign(sin t)·|sin t|^(2/n) for the chosen exponent n, converts them to percentages, and joins them into a clip-path: polygon(...) — a polygon smooth enough at 48 points to read as a continuous curve.

What does the smoothness value actually control?

It's the superellipse exponent n. At n = 2 the shape is a perfect circle; as n increases the corners pull outward and flatten toward a square while the sides stay gently curved — most squircle logos land somewhere between 3 and 5.

Is there a newer, native CSS way to do this?

A corner-shape: squircle property is landing in some browsers' CSS Shapes work, but it isn't broadly supported yet. The clip-path polygon approach here works in every current browser today with no fallback needed.

Does clip-path affect click targets or accessibility?

clip-path only changes what's painted, not the element's layout box or hit-testing area in most browsers, so clicks just outside the visible curve near the corners may still register. For a purely decorative shape like an avatar or icon this is rarely noticeable; keep interactive controls (buttons, links) unclipped if precise hit areas matter.

CSS SQUIRCLE GENERATOR

Build an iOS-style continuous-curve squircle shape and copy the clip-path CSS.

Corner smoothness: 4.0

Size: 200px

Color

.squircle {
  width: 200px;
  height: 200px;
  background: #ff6a35;
  clip-path: polygon(100% 50%, 99.79% 68.06%, 99.14% 75.44%, 98.06% 80.93%, 96.53% 85.36%, 94.54% 89.01%, 92.04% 92.04%, 89.01% 94.54%, 85.36% 96.53%, 80.93% 98.06%, 75.44% 99.14%, 68.06% 99.79%, 50% 100%, 31.94% 99.79%, 24.56% 99.14%, 19.07% 98.06%, 14.64% 96.53%, 10.99% 94.54%, 7.96% 92.04%, 5.46% 89.01%, 3.47% 85.36%, 1.94% 80.93%, 0.86% 75.44%, 0.21% 68.06%, 0% 50%, 0.21% 31.94%, 0.86% 24.56%, 1.94% 19.07%, 3.47% 14.64%, 5.46% 10.99%, 7.96% 7.96%, 10.99% 5.46%, 14.64% 3.47%, 19.07% 1.94%, 24.56% 0.86%, 31.94% 0.21%, 50% 0%, 68.06% 0.21%, 75.44% 0.86%, 80.93% 1.94%, 85.36% 3.47%, 89.01% 5.46%, 92.04% 7.96%, 94.54% 10.99%, 96.53% 14.64%, 98.06% 19.07%, 99.14% 24.56%, 99.79% 31.94%);
}

How to build a squircle shape

1
Adjust corner smoothness on the live preview — lower values look more like a circle, higher values look closer to a rounded square.
2
Set the size and fill color.
3
Copy the generated clip-path CSS.
4
Apply the .squircle class to an icon, avatar, or card element.

Questions

What makes a squircle different from a rounded square (border-radius)?: border-radius joins a straight edge to a circular arc with a sudden change in curvature at the point they meet, which the eye reads as a subtle kink. A squircle is a superellipse — |x|ⁿ + |y|ⁿ = 1 — where the curve changes continuously all the way around, the same continuous-corner shape Apple uses for iOS app icons, so it looks smoother at the same corner size.
How does this tool draw a superellipse with only clip-path?: There's no native CSS superellipse primitive, so this tool samples 48 points around the mathematical curve x = sign(cos t)·|cos t|^(2/n), y = sign(sin t)·|sin t|^(2/n) for the chosen exponent n, converts them to percentages, and joins them into a clip-path: polygon(...) — a polygon smooth enough at 48 points to read as a continuous curve.
What does the smoothness value actually control?: It's the superellipse exponent n. At n = 2 the shape is a perfect circle; as n increases the corners pull outward and flatten toward a square while the sides stay gently curved — most squircle logos land somewhere between 3 and 5.
Is there a newer, native CSS way to do this?: A corner-shape: squircle property is landing in some browsers' CSS Shapes work, but it isn't broadly supported yet. The clip-path polygon approach here works in every current browser today with no fallback needed.
Does clip-path affect click targets or accessibility?: clip-path only changes what's painted, not the element's layout box or hit-testing area in most browsers, so clicks just outside the visible curve near the corners may still register. For a purely decorative shape like an avatar or icon this is rarely noticeable; keep interactive controls (buttons, links) unclipped if precise hit areas matter.