Round each corner independently with a live preview and copy the shortest valid border-radius shorthand. Supports px, rem, em and % units — private and free.
Runs entirely in your browser — your data never leaves your device.
How to use CSS Border Radius Generator
What it does & when you need it
Rounded corners look simple until you want each one different — a chat bubble with
three soft corners and one square, a tab with only its top edges rounded, a pill
button. The border-radius shorthand can express all of that, but its four-value
order and collapsing rules are easy to get wrong. This generator gives you a field
per corner, a "link all" toggle for the common uniform case, and a live box that
repaints as you type, then hands you the tightest valid shorthand. It runs in your
browser and never uploads anything.
Reach for it when you are styling cards, avatars, inputs, or badges and want a
radius that reads as intentional rather than the browser default.
How to use
Leave Link all corners on for a uniform radius, or turn it off to set each
corner independently.
Type a radius into each corner field and pick a unit — px, rem, em,
or %.
Copy the border-radius: …; line, or press Ctrl/Cmd + Enter.
Things worth knowing
The shorthand reads clockwise from the top-left. The order is top-left,
top-right, bottom-right, bottom-left. This tool collapses the value the way CSS
does: one number when all four match, two when the diagonals match, three when a
single pair does, and four otherwise — so you copy the shortest form that still
means what you drew.
A percentage radius is relative to the box's own size. Setting every corner to
50% turns a square into a circle and a rectangle into an ellipse, which is the
cleanest way to make a circular avatar. Negative radii are invalid CSS, so they
are clamped to zero. Pair the result with the
box-shadow generator to finish a card.
Examples
Uniform rounded card
16 16 16 16 px
Four equal corners collapse to a single value: border-radius: 16px.
Asymmetric speech bubble
40 8 40 8 px
Matching diagonals collapse to two values: border-radius: 40px 8px.
Circle from a square
50 50 50 50 %
A 50% radius on every corner turns a square element into a circle.
Frequently asked questions
What order do the four border-radius values use?+
The shorthand runs clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. When you supply fewer than four values, CSS mirrors them — one value applies to all corners, and two values set the top-left/bottom-right pair and the top-right/bottom-left pair. This tool always outputs the shortest form that reproduces your corners.
How do I make a perfect circle?+
Set every corner to 50% on a square element. A percentage radius is relative to the box size, so 50% collapses each corner into a quarter-circle that together form a full circle. On a rectangle the same value produces an ellipse, which is the usual trick for pill buttons and avatars.
Should I use px, rem, or % for corner radius?+
Use px for a fixed radius that never changes, rem to have the radius scale with the root font size for accessibility, and % for a radius that tracks the element size, like a circular avatar. This tool lets you switch units and see the result immediately.
Why is a negative radius ignored?+
A negative border-radius is invalid CSS and browsers treat it as zero, so this tool clamps any negative value to 0 rather than emitting a declaration the browser would drop.
Is anything uploaded?+
No. The shorthand is built entirely in your browser as you type, with no network request, so it works offline and your design stays on your machine.