FREE · DESIGN & CSS TOOLS
Squircle Corner Generator (CSS corner-shape).
Make smooth iOS-style squircle corners with the new CSS corner-shape property, with a clip-path and SVG fallback for browsers that do not support it yet.
Loading the calculator…
How to use Squircle Corner Generator (CSS corner-shape)
Choose the corner shape and radius, set the size used for the fallback, then copy the CSS or the SVG.
How it works
corner-shape: superellipse(k) draws |x|^(2^k) + |y|^(2^k) = 1 in each corner (k = 2 is the squircle). The fallback samples the same curve into an SVG path.
Example
A 48 px radius with corner-shape: squircle, plus a 240 × 240 clip-path that draws the same superellipse corners everywhere.
Questions about Squircle Corner Generator (CSS corner-shape)
Is Squircle Corner Generator (CSS corner-shape) free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
corner-shape is new (Chromium first); the clip-path fallback needs a fixed size. Everything is calculated in your browser; nothing you type is uploaded. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.