Drag a slider for each corner, switch the unit between px and %, and the CSS border-radius declaration updates live in the box below - no upload, nothing leaves your browser.
- Move the "All corners" slider to round every corner by the same amount at once.
- Fine-tune each corner on its own slider - top-left, top-right, bottom-right, bottom-left.
- Switch the unit toggle between px and % to change how the radius is measured.
- Copy the generated CSS line straight into your stylesheet.
CSS Border-Radius Generator
The CSS Border-Radius Generator turns slider positions into a ready-to-paste border-radius line: set each of the four corners on its own slider, pick px or % as the unit, and copy the result.
Every change updates the preview swatch and the generated CSS text instantly - there is no separate "Generate" click to press.
Key features
- Four independent corner sliders - top-left, top-right, bottom-right, bottom-left - each ranging 0 to 100 with a default of 20.
- An "All corners" master slider that sets all four corners to the same value at once.
- A unit toggle that switches every value between px and %.
- Live 150x150px preview swatch whose
border-radiusstyle updates on every control change. - Read-only generated CSS text (
border-radius: <tl> <tr> <br> <bl>;) with a copy-to-clipboard button and a manual-copy fallback message. - Renders with working defaults on page load, so output appears with no click required.
When to use it
Reach for this tool when you want rounded corners on a card, button, image, or panel and need the exact CSS to paste into your stylesheet - either a uniform radius on all four corners or a different radius per corner.
Border-radius vs box-shadow
This tool builds a border-radius value for rounding corners; it does not build shadows. The two produce different CSS properties for different visual effects:
| Tool | CSS property | Best for |
|---|---|---|
| CSS Border-Radius Generator | border-radius | Rounded corners on cards, buttons, images, and panels |
| CSS Box-Shadow Generator | box-shadow | Drop or inset shadows on cards, buttons, and panels |
Privacy and data handling
Nothing is uploaded when you use this tool - the whole calculation runs in your browser, so your slider values and the generated CSS never leave the device.
How the corners map to the CSS
The generated shorthand lists the four corners in the order CSS expects them: top-left, top-right, bottom-right, bottom-left. Setting all four to the same value gives an evenly rounded box; giving each corner a different value produces asymmetric shapes. Switching the unit to % measures the radius as a share of the element's own width and height, so a large percentage on every corner turns a square into a circle or an ellipse.
Frequently Asked Questions
What does the CSS Border-Radius Generator do?
It builds a single border-radius CSS declaration from four corner sliders (top-left, top-right, bottom-right, bottom-left), a px/% unit toggle, and an "All corners" master slider, and shows a live preview swatch plus the copyable CSS text as you adjust each control.
Can I round each corner by a different amount?
Yes. Each corner has its own slider, so you can set four different radii. The generated shorthand lists them in CSS order - top-left, top-right, bottom-right, bottom-left. Use the "All corners" slider instead when you want the same radius on every corner.
What is the difference between the px and % units?
px measures the radius in fixed pixels, so the rounding stays the same regardless of the element's size. % measures it as a share of the element's own width and height, so the rounding scales with the box - and a large percentage on every corner can turn a square into a circle or ellipse.
How is this different from the CSS Box-Shadow Generator?
The Border-Radius Generator produces a border-radius line for rounding corners. The CSS Box-Shadow Generator produces a box-shadow line for drop or inset shadows - a different CSS property for a different visual effect.
Does anything get uploaded when I use this tool?
No. The corner values and unit are read directly from the controls in your browser and the CSS text is generated locally - nothing is sent to a server.