Squircle generator: smooth corners in CSS

How to use the squircle generator

1. Set the size and radius. Choose the width and height of your shape, then the corner radius, just as you would with border-radius.
2. Add corner smoothing. Corner smoothing stretches each curve further along the edges so it eases in gradually. 60% is close to Apple’s app icons; 0% is a normal rounded corner.
3. Compare. The dashed outline shows an ordinary border-radius of the same size, so you can see the difference.
4. Pick an output. A CSS mask scales with the element and works everywhere. clip-path uses an exact path, SVG gives you a shape file, and corner-shape is the new native CSS property.

What is a squircle?

A squircle sits between a square and a circle. A normal rounded corner joins a straight edge to a quarter circle, and the sudden change in curvature is just visible as a slight “kink”. A squircle’s curvature changes gradually, so the corner looks smoother and more natural. Apple uses this continuous-corner style for app icons and hardware, and Figma calls the setting “corner smoothing”.

How to make one in CSS

Until recently there was no native way. The reliable method is to draw the shape as an SVG path and apply it with mask or clip-path. Chrome and Edge 139 added corner-shape: squircle, which works alongside border-radius and also shapes borders and shadows. Other browsers ignore it and show a normal rounded corner, so it’s safe to use as a progressive enhancement.

Mask or clip-path?

Both cut the element to the shape. The mask version here stretches to fit the element, so it works best when the element stays at roughly the size you designed it for. clip-path: path() uses exact pixel coordinates, so generate it at the size you need. Neither shapes a box-shadow; use filter: drop-shadow() on a parent instead.

Frequently asked questions