CSS Squircle Generator — Rounded Square
Design CSS border-radius visually: four independent corner sliders in px or percent, a link-all-corners shortcut for instant circles and pills, plus an organic blob mode with randomized shapes.
Result
This page opens the border-radius generator with all four corners linked at 30%, a moderate rounding that sits between a sharp square and a full circle. It is not a true mathematical squircle (a superellipse), but it is the closest a single CSS property can get, and it is the value most design systems reach for when they want that look.
The name comes from the rounded-square app icons popularized by iOS: enough curve on each corner to feel soft and friendly, but never so much that the shape reads as round. Icon tiles, card thumbnails and modern avatar frames all lean on radii in this same rough range for exactly that reason.
Nudge the linked slider up for a softer, more circular feel or down for a crisper, more square one — the CSS line updates with every change, ready to copy once the curve feels right for your icon or card.