CSS border-radius generator
Per-corner border-radius with live preview and a shorthand value.
Runs 100% in your browserHow to use the border-radius generator
- Adjust per-corner radii. Use the four sliders for each corner, or the elliptical X/Y pair for the slash syntax.
- Copy the CSS. Click Copy to grab the rule. The shorthand collapses to a 1-, 2-, 3- or 4-value form when possible.
About border-radius
The four-corner shorthand reads top-left, top-right, bottom-right, bottom-left. CSS will
collapse to a shorter form when corners match: 12px when all four are equal,
12px 4px for diagonal pairs. Percentages scale with element size (50% on a square
yields a circle), pixels stay fixed. For pill-shaped buttons, the cheapest trick is a very large
radius (9999px) which always rounds to a half-height ellipse.
Frequently asked questions
- border-radius rounds the corners of a box. The shorthand accepts 1–4 length values; the long form sets each corner (and even the X/Y elliptical radii) independently.
- border-radius: 20px / 40px means a 20-pixel horizontal radius and a 40-pixel vertical radius — i.e. an ellipse rather than a circle at each corner.
- Percent radii scale with the element's size — 50% on a square box gives a circle. Pixel radii stay fixed regardless of element size.
- Yes — drop the value into a Tailwind arbitrary class like rounded-[20px_40px_20px_40px].