Round each corner with live sliders and copy the border-radius CSS.
Generated locally in your browser.
How do you generate CSS border-radius?
When all four corners match, the output is a single value; otherwise it lists top-left, top-right, bottom-right and bottom-left in order. Pixel values give a fixed corner regardless of size, while percentage values scale with the element. Setting every corner to 24px outputs border-radius: 24px, and a 50% radius on a square makes a perfect circle. Adjust each corner and copy the code.
Understanding your result
Pixel values give a fixed corner regardless of size; percentage values scale with the element, so 50% always produces an ellipse or circle.
Formula and method
When all four corners match, the output is a single value; otherwise it lists top-left, top-right, bottom-right and bottom-left in order.
Worked example
Setting every corner to 24px outputs “border-radius: 24px;”. A 50% radius on a square makes a perfect circle.
How to use this tool
- Set the radius for each corner.
- Switch between pixels and percent.
- Copy the generated border-radius rule.
Common mistakes to avoid
- Using a percent radius and expecting a fixed corner — percent scales with the box.
About the CSS Border Radius Generator
Round the corners of any element and copy the border-radius CSS. Adjust all four corners independently and watch the live preview.
Explore all Developer Tools tools
Frequently asked questions
How do I make a circle?
Use a square element and set every corner to 50%.
Can corners differ?
Yes. Set each corner separately and the tool outputs the four-value shorthand.