CSS Corner Smoothing Preview
Preview rounded and superellipse-ish corner styles.
Smoother, superellipse-ish corners
Standard border-radius corners can look slightly hard where the curve meets the straight edge. Smoother, “squircle”-style corners — like Apple’s icons — ease that transition. This tool previews rounded and superellipse-ish corner styles so you can compare the feel.
The difference is subtle but noticeable at large sizes, and seeing them next to each other helps you decide whether the extra smoothing is worth it for your buttons and cards. Preview the options and copy the CSS that fits.
Squircles, previewed
True corner smoothing needs an SVG or clip-path, since border-radius alone cannot soften the transition — the preview shows how close CSS gets. Runs in your browser.
Frequently asked questions
What does the "smooth" box change?
It uses a two-part radius such as "32px / 28px", where the horizontal and vertical radii differ slightly, next to a regular 32px radius so you can compare the curves side by side.
Is this a true squircle?
No. border-radius always draws elliptical arcs. Chromium browsers (139+) support corner-shape: squircle for real smoothed corners, which other browsers ignore while keeping the normal radius.
When do smoothed corners matter?
On large cards and app icons, where the sudden start of a circular curve is noticeable. At small radii on buttons the difference is barely visible.
Related tools
Practical utilities for front-end design and implementation work.