Border Radius Generator
Round the corners of a box together or one by one in pixels or percent, preview the shape and copy the shortest border-radius CSS.
Free · No upload · 100% on your device
How to use Border Radius Generator
- Choose the settings in the side panel.
- The result updates instantly. Select “Update” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Border Radius Generator
With “Same for all corners” on, only the first value is used. 50% on a square makes a circle; on a rectangle, an ellipse. The CSS is written in the shortest form that gives the same result.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Border Radius Generator: frequently asked questions
How do I round each corner separately?
Set the top-left, top-right, bottom-right and bottom-left values, or turn on “Same for all corners”.
How do I make a circle with CSS?
Use 50% on a square box. On a rectangle, 50% makes an ellipse.
Pixels or percent?
Pixels keep the same curve on any size; percent scales with the box.
Is the CSS as short as possible?
Yes. It is written in the shortest form that gives the same result.