Squircle & Smooth Corner Generator

About the Squircle & Smooth Corner Generator

An ordinary rounded corner switches abruptly from a straight edge to a circle. A squircle curves gradually, which is why app icons and modern interfaces look softer. This generator makes both kinds of smooth shape: the mathematical superellipse (|x/a|ⁿ + |y/b|ⁿ = 1, where n = 4 is the classic squircle) and the smoothed rounded rectangle that Figma’s corner smoothing draws, with a radius and a smoothing from 0 to 100%.

See the result over an ordinary border-radius outline and as an app-icon mask (with your own picture if you like), then copy it as an SVG path, a CSS clip-path: path(), a scalable CSS mask, or the new CSS **corner-shape** property with a fallback for browsers that do not support it yet.

Common uses

• App icons, avatars and logo containers with iOS-like continuous corners.
• Cards, buttons and image frames that look softer than plain border-radius.
• Masks for photos and video thumbnails in squircle shapes.
• Matching the corner smoothing of a Figma design in code.

Superellipses and squircles

A superellipse is the set of points with |x/a|ⁿ + |y/b|ⁿ = 1 (a Lamé curve), where a and b are half the width and height. n = 2 gives an ellipse, n = 4 with a = b is what is usually called a squircle, and as n grows the shape approaches a rectangle. Piet Hein’s famous superellipse for Sergels torg in Stockholm uses n = 2.5 with a 6 : 5 axis ratio (one of the presets).

The tool writes the curve as cubic Béziers: it divides the unit curve into equal angle steps (12 to 32 per quarter, more for higher n), gives each piece the exact end points and tangents, and scales it to your size. The result stays within about a ten-thousandth of the size from the true curve.

How corner smoothing works

This follows the construction in Figma’s engineering article Desperately seeking squircles. With radius R and smoothing ξ, the corner begins p = (1 + ξ) · R from the corner instead of R. The middle of the corner is still an arc of the original circle — same centre and radius, but only 90° × (1 − ξ) of it — and on each side a cubic Bézier, with its first three control points on the straight edge, eases from the edge into the arc (the lengths a and b along the edge are in the ratio 2 : 1). At 0% you get an ordinary rounded corner; at 100% there is no circular part left and each corner uses twice the radius. Figma’s smoothing control has an iOS button that sets 60% (Figma help).

A smoothed corner needs more room. When a side is too short, smoothing is reduced first and then the radius, as Figma does; the tool says when this happens.

CSS corner-shape

The CSS Borders 4 draft adds [corner-shape](https://drafts.csswg.org/css-borders-4/#corner-shaping): each corner inside its border-radius box becomes a quarter superellipse, superellipse(K) with exponent 2^K (round = 1, squircle = 2, square = infinity). So a superellipse with exponent n is exactly border-radius: 50%; corner-shape: superellipse(log₂ n), and it scales with the element. Borders, outlines and box-shadows follow the shape too.

A smoothed corner is not a superellipse, so for those the tool finds the superellipse(K) that matches best with border-radius: p and tells you the largest difference in pixels. corner-shape works in Chromium-based browsers (Chrome and Edge 139 and later) — see MDN for the others — so the exported CSS adds a fallback: ordinary rounded corners, or the exact shape as a mask.

clip-path, mask or corner-shape?

• clip-path: path() is exact and widely supported, but its coordinates are pixels: the element must be exactly the size you set here.
• mask with the SVG as a data URI is exact and scales with the element (keep the same aspect ratio). Like clip-path, it cuts off box-shadows and borders.
• corner-shape keeps borders, outlines and shadows and scales freely, but browser support is still limited — always ship a fallback.

Limitations

• clip-path: path() uses pixels and does not scale; use the mask or corner-shape output for elements whose size changes.
• The mask stretches with the element: if the element’s aspect ratio differs from the shape’s, the corners distort.
• corner-shape is a draft feature with limited browser support (Chromium-based browsers); for smooth corners it is a close approximation, not an exact copy.
• The 60% preset follows Figma’s iOS setting; it is not an official Apple shape.
• Sizes are 16 to 2,048 px per side; PNG downloads are up to 4,096 px.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.