CSS Border Radius Generator
Shape a box with four corner values, inspect the result, and copy the ready-to-paste CSS declaration.
A QUICK WALKTHROUGH
How to use this tool
- Choose pixels or percentages and set each corner from 0 to 200.
- Watch the preview update as you change the values.
- Generate, copy, or reset the CSS shorthand.
Clockwise four-corner shorthand
The output uses the CSS four-value order: top left, top right, bottom right, and bottom left. Each corner is independently adjustable from 0 to 200 in the selected unit.
Pixels and percentages
Pixel radii are fixed lengths. Percentage radii are resolved against the corresponding box dimensions and can create visibly different curves on non-square boxes. This generator emits one circular radius per corner and does not generate the slash syntax for separate horizontal and vertical ellipse radii.
GOOD TO KNOW
Common questions
What does a percentage radius measure?
A percentage radius is resolved from the box dimensions by CSS, so the same value can look different on a wide rectangle and a square.
Can I create elliptical corners?
The preview and output use circular corner radii only. CSS supports elliptical radii with slash syntax, but this focused generator does not emit that form.
Why is the maximum 200?
The 0–200 range keeps the controls practical for common cards, panels, and badges while still allowing oversized curves. CSS may clamp radii when adjacent corners cannot fit.