Best for square, shadow-less elements (avatars, app icons, thumbnails). The shape is a rounded box; the exponent controls how the corners curve, a squircle being fuller than a plain round corner.
One slider, every corner
A squircle is a rounded corner with a smoother, fuller curve, the shape iOS icons use. Both a
plain rounded corner and a squircle are special cases of a superellipse,
|x|ⁿ + |y|ⁿ = 1. Change the exponent n and one control sweeps the whole
family: a straight diagonal bevel at n=1, a quarter-circle round at n=2, a
squircle around n=4, a near-square corner as n climbs, and a concave scoop
below 1.
Why a mask, not corner-shape
CSS finally has a native corner-shape property, but it only shipped in Chrome in
2025 and is not yet in Firefox or Safari, so today it would do nothing for most of your visitors.
This tool's primary output is therefore an SVG mask: an inline superellipse path
used as a mask, which is supported in every current browser and scales with the
element. It clips the element to the exact shape now, and you can layer the
corner-shape one-liner on top for browsers that support it.
One caveat with the mask: it clips the element's box, so a box-shadow or border drawn
outside the shape will be cut off. Put shadows on a parent wrapper if you need them. The corner
radius is a percentage, so it scales like border-radius in percent (corners follow
the box's aspect ratio).
Browser support
The mask technique is baseline; native corner-shape is new and Chromium-only for now.
| Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| mask (SVG) — the fallback used here | Yes | Yes | Yes | Yes |
| corner-shape — the modern one-liner | 139+ | 139+ | ✗ | ✗ |