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 the same numeric radius value for both axes of each corner and does not generate slash-separated horizontal and vertical values.
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 output uses one numeric value per corner. Percentages resolve against each axis of the box and can produce elliptical corners on a non-square box. This generator does not emit slash syntax for independently specified horizontal and vertical radii.
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.