CSS Border Radius Generator
This CSS border radius generator lets you round the corners of a box and copy th
This CSS border radius generator lets you round the corners of a box and copy th
How to use CSS Border Radius Generator
- Drag each corner slider or type an exact pixel value, keeping Link on to round all corners at once.
- Watch the live preview and read the generated border-radius CSS shorthand below it.
- Click Copy to copy the shorthand or longhand CSS and paste it into your stylesheet.
About CSS Border Radius Generator
This CSS border radius generator lets you round the corners of a box and copy the exact border-radius code to paste into your stylesheet. Drag a slider or type a precise pixel value for each of the four corners, and the live preview and generated CSS update instantly. When all corners share a value the tool collapses the output to the shortest correct shorthand (for example border-radius: 24px), and it also gives you the per-corner longhand when you need it.
Link mode keeps all four corners in sync so one change rounds the whole box evenly; unlink it to shape each corner on its own. The presets cover the common cases: a hard square, a subtle 8px, a friendly 16px, and a large radius that produces a pill on wide boxes or a circle on square ones. The preview box is a fixed size, so treat the pixel values as the recipe rather than a pixel-perfect match to your own element's dimensions.
The tool uses static pixel values (not elliptical or percentage radii) to keep the output predictable and copy-paste ready. Everything is computed locally in your browser with plain JavaScript. Nothing you enter is uploaded or stored, and no sign-up is required.
Frequently asked questions
- How do I use this border radius generator?
- Drag the slider or type a pixel value for each corner and watch the preview change. When it looks right, click Copy to grab the CSS. Keep Link all corners checked to round the whole box evenly, or uncheck it to shape each corner independently.
- What does the CSS shorthand order mean?
- The border-radius shorthand lists corners clockwise starting from the top-left: top-left, top-right, bottom-right, bottom-left. This tool collapses that to the shortest correct form, so four equal corners become a single value and symmetric pairs become two or three values.
- How do I make a perfect circle or a pill shape?
- Set a very large radius (the Pill / Circle preset uses 500px). A radius at least half the box's width and height rounds the corners fully: a square box becomes a circle and a wider box becomes a pill. In your own CSS you can also use border-radius: 50% for a circle.
- Does it support percentage or elliptical radii?
- No. This tool outputs static pixel radii only, which keeps the code predictable and easy to paste. If you need percentage-based or elliptical (two-value) corners, you can adapt the pixel output by hand in your stylesheet.
- Is the preview an exact match for my element?
- The preview uses a fixed-size demo box, so the shape is representative rather than pixel-identical to your element. The pixel radius values it generates are exact, so apply them to your real element and the corners will round by the same amount.
- Is my input private?
- Yes. Everything runs entirely in your browser with plain JavaScript. Nothing is uploaded, saved, or shared, and no account is needed.