CSS Border Radius Generator
Shape boxes with per-corner and elliptical border-radius values and copy the CSS.
Runs in your browser. Your input is processed on your device and is not uploaded to our server.
How to use the CSS Border Radius Generator
- Adjust each corner, or link them for uniform rounding.
- Switch to elliptical mode for organic shapes.
- Copy the CSS.
border-radius accepts one to four values (top-left, top-right, bottom-right, bottom-left) and an optional second set after a slash for elliptical corners. Percentages are relative to the element’s size, so 50% on a square makes a circle.
Frequently asked questions
How do I make a circle?
Give a square element border-radius: 50%.