CSS Border Radius Generator
About this generator
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.
How to use
CSS border-radius syntax
| 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 snippets
border-radius: 16px;
border-radius: 8px 16px 24px 0px; /* TL TR BR BL */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Browser support
border-radius has universal browser support — safe to use anywhere without a fallback or prefix.
Frequently asked questions
What's the slash syntax (border-radius: 50% 30% / 20% 40%)?
The slash separates horizontal radii from vertical radii — letting each corner have an ELLIPTICAL curve instead of a circular one. Before the slash: the four horizontal radii (top-left, top-right, bottom-right, bottom-left). After the slash: the four vertical radii in the same order. When all 8 values are different, you get organic blob shapes like the leaf, chat bubble, and asymmetric blob presets in this generator. Most simple cases (sharp / rounded / pill) only need one number per corner, so the slash is auto-omitted from the output when H = V on every corner.
Why use px vs % for border-radius?
px gives a FIXED pixel radius — looks the same on every size element. Best for buttons, cards, inputs where you want consistent corner curvature. % gives a radius RELATIVE to the element's dimensions — 50% always produces a perfect ellipse (circle on square elements). Best for pills, circles, and shape-shifting components. Combining: use border-radius: 50% on a square = circle. border-radius: 999px on a wider element = pill (the radius caps at element-half). Both approaches are widely used.
Can I animate border-radius?
Yes — animating between two border-radius values produces smooth shape morphing. Both the start and end must have the same number of values (all-corners, four-corner shorthand, or full 8-value slash syntax). Common patterns: hover-morph from a square card to a rounded one, loading-state morph from a circle to a pill, blob breathing animation by stepping through several blob keyframes. transition: border-radius 300ms ease just works.
What about modern CSS corner-shape (squircle)?
CSS Working Group is shipping corner-shape as a new property (Chrome 132+ behind a flag as of late 2025; Safari likely 2026). It lets you specify the SHAPE of the corner curve — squircle (iOS-style superellipse), straight, scoop, etc. — independent of the radius. Until it ships universally, the closest CSS approximation is a high-precision border-radius slash with carefully tuned H/V ratios, which the blob presets in this generator approximate. For now, use the existing border-radius; layer corner-shape in once it's broadly supported.
Why is my radius being clipped at 50%?
Browsers cap the border-radius at half of the element's smaller dimension to prevent the corners from overlapping. On a 200px × 200px square, the maximum effective radius is 100px (50%). On a 400px × 100px pill, the maximum is 50px. Setting border-radius: 999px is the convergent trick to 'always clamp to maximum' — works for any aspect ratio and produces a pill / circle without computing the exact pixel value.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
