Border Radius Generator
Design rounded corners visually — set each corner's radius, preview live, and copy the ready-to-use CSS — free, fast and private.
Preview box
Move the sliders to design your corners.
How to use Border Radius Generator
- Set the radius for each corner (or use the single slider for all four).
- Watch the live preview update.
- Copy the generated CSS.
- Paste it into your stylesheet.
Note: this tool runs in your browser. Nothing is uploaded.
Frequently Asked Questions
What does border-radius do?
It rounds the corners of an element. A value of 0 keeps square corners; 50% on a square makes a circle.
Can each corner be different?
Yes — set a different radius for top-left, top-right, bottom-right and bottom-left for asymmetric shapes.
What units can I use?
This tool generates pixel values. You can change them to % or em in the CSS if you prefer.
Is my data uploaded anywhere?
No. The CSS is generated in your browser.