CSS Border Radius Generator
Per-corner border-radius with live preview and copy-paste CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css border radius generator
- Pick a value for each corner — top-left, top-right, bottom-left, bottom-right — using the numeric inputs.
- Choose a unit (px, %, or rem) from the unit selector; px is the most predictable choice.
- Optionally change the preview color so you can see the rounding on a real fill, not just an outline.
- Press Generate CSS to surface the result panel.
- Click Copy CSS to put the `border-radius: …;` declaration on your clipboard, then paste it into your stylesheet.
About this css border radius generator
The CSS border-radius generator gives you four numeric inputs — one per corner — and outputs a single declaration that you can paste into any CSS rule. When all four corners have the same value the tool collapses to the shorthand form `border-radius: 16px;`; when they differ it emits the four-value shorthand `border-radius: top-left top-right bottom-right bottom-left;` exactly as the CSS spec orders it. A live preview block sits above the controls so it paints first and becomes the LCP element, then re-renders as you type — you can see exactly how each corner reacts before copying.
Worked example: set top-left to 12, top-right to 32, bottom-right to 8, and bottom-left to 24 with unit px. The output is `border-radius: 12px 32px 8px 24px;` — an asymmetric rounded shape useful for organic blob buttons. Switch the unit to % and the same values would produce ellipse-style corners that scale with the element’s size. Switch all four to 9999px (or 50% on a square box) and you get a perfect pill or circle. Everything runs in your browser; nothing is sent anywhere.
FAQ
- In what order does CSS read the four border-radius values?
- When you write `border-radius: A B C D;` the values map clockwise from the top-left: A = top-left, B = top-right, C = bottom-right, D = bottom-left. The generator follows this order exactly.
- Should I use px, %, or rem?
- px gives the most predictable result and is the safest default. % scales relative to the element’s size, which is useful for circles (50%) and pills. rem scales with the root font size, useful for design systems that want corners to track typography.
- How do I make a perfect circle?
- Give the element equal width and height, then set border-radius to 50% (any unit) or to a very large px value like 9999px. The generator outputs the declaration; size the box in your own CSS.
- Can I set elliptical (two-radius per corner) values?
- This tool emits the single-radius form, which is enough for the vast majority of UI work. For elliptical corners with two radii per corner (`border-radius: 50% / 25%`), copy the output and extend it manually in your editor.
- Does the value clamp anywhere?
- Browsers automatically clamp border-radius so two adjacent corners cannot overlap, regardless of the value you supply. If two large radii would meet, the browser scales them down proportionally — your CSS stays valid.