Surface:
Advertisement
Modeuniform
Unitpx
ShapeSquare
Design CSS border-radius shapes visually — pick a preset or tune per-corner H/V radii independently for elliptical corners (the slash syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4). 12 curated presets cover sharp / slight / rounded / pill / circle for the standard cases, plus 3 blob shapes, leaf, diamond, ticket, and chat-bubble for organic shapes most generators don’t ship.
Switch between px and % units (% is relative to element dimensions — 50% always produces a circle). Preview on 4 surfaces (dark / light / brand / accent) on 3 element shapes (square / wide / tall) so you can see how the radius reads at different aspect ratios.
Permalink: every adjustment encodes into the URL. No login, no watermark, no paywall. Free and MIT-licensed.
| Value | Description |
|---|---|
top-left | Rounds the top-left corner. First value in the shorthand. |
top-right | Rounds the top-right corner. Second value in the shorthand. |
bottom-right | Rounds the bottom-right corner. Third value in the shorthand. |
bottom-left | Rounds the bottom-left corner. Fourth value in the shorthand. |
/ h v | Slash separates horizontal from vertical radii for elliptical corners. |
% | Percentage is relative to the element's width (H) or height (V). |
border-radius: 16px;
border-radius: 8px 16px 24px 0px; /* TL TR BR BL */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
border-radius has universal browser support — safe to use anywhere without a fallback or prefix.