Squircle CSS clip-path

A practical way to render a squircle in CSS is clip-path: path() with the generated superellipse outline. Unlike border-radius (which uses circular-arc corners), a path-based clip follows the selected mathematical curve. Browser support is broad, but check current compatibility for your audience.

Generate your clip-path →

Set the width, height and smoothing in the generator, then copy the ready-made clip-path: path("…") string.

Why clip-path instead of border-radius?

border-radius rounds corners with a quarter-circle arc. A squircle is a superellipse — |x/a|ⁿ + |y/b|ⁿ = 1 — where curvature changes continuously into the corner. The generator samples that equation into an SVG-style path string, and clip-path: path() clips the element to the generated outline.

How to use it

Open the generator, set width / height / smoothing (n).
Copy the CSS — clip-path output.
Paste it onto your element and give the element the same pixel width and height you used in the generator.

.squircle {
  width: 240px;
  height: 240px;
  background: #5b8cff;
  clip-path: path("M 240.00 120.00 L … Z"); /* from the generator */
}

The path coordinates are in pixels relative to the element's box, so the clip only matches if the element's size equals the size you generated. Change the dimensions → regenerate the path.

Browser support

Method	Support
`clip-path: path()`	Broad support; fixed path coordinates do not scale automatically
`corner-shape: superellipse()`	Experimental and limited availability

For production, verify current path() compatibility. The newer superellipse() function remains experimental and is not available in every major browser.

clip-path vs mask vs corner-shape

clip-path: path() — clips the element to the squircle. Best for solid shapes, images, and cards. Recommended.
mask / -webkit-mask — useful if you need the squircle as an alpha mask over complex content; slightly more setup.
corner-shape: superellipse() — one-line future syntax that turns border-radius into a superellipse; use once support is broad.

Common pitfalls

Mismatched size. The element must match the generated width/height or the clip looks cut off.
Responsive boxes. A fixed pixel path won't scale fluidly — regenerate per breakpoint, or use an SVG (see below).
Borders. clip-path clips the border too; for an outlined squircle, layer two clipped elements or use the SVG stroke approach.

FAQ

Does clip-path: path() work in Safari?

Yes, modern Safari supports clip-path: path(). It is broadly supported across current browsers.

Can I make a responsive squircle with clip-path?

A pixel path is fixed-size. For fluid scaling, use the SVG version, which scales with its viewBox.

How do I add a border to a clip-path squircle?

Stack a slightly larger clipped element behind it as the "border", or use the SVG with a stroke. A normal CSS border gets clipped.