Squircle CSS clip-path

The most reliable way to render a squircle in pure CSS today is clip-path: path() with the exact superellipse outline. Unlike border-radius (which only makes circular-arc corners), a path-based clip gives you the true continuous curvature of a squircle — and it works in every modern browser.

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. There is no border-radius value that produces this; you have to clip the element to the actual outline. clip-path: path() takes an SVG-style path string and masks the element to exactly that shape.

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()`	All modern browsers (Chrome, Edge, Firefox, Safari)
`corner-shape: superellipse()`	Experimental, Chromium 139+ only

For production today, clip-path: path() is the safe choice. The newer corner-shape property is cleaner but not yet widely supported.

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.