⬛

Border Radius Generator

Visually generate CSS border-radius values

Top-Left10px

Top-Right10px

Bottom-Right10px

Bottom-Left10px

CSS Output

border-radius: 10px 10px 10px 10px;

Related Tools

About This Calculator

The CSS border-radius property allows developers to create rounded corners on HTML elements, from subtle curves to full circles and complex organic shapes. This visual generator lets you adjust each of the four corners independently, preview the result in real time, and copy the generated CSS code. You can create pill-shaped buttons, circular avatars, speech-bubble shapes, and asymmetric designs by combining different horizontal and vertical radius values. The tool supports the shorthand and longhand border-radius syntax, including the slash notation for elliptical corners. It is essential for modern UI design where sharp rectangular boxes feel outdated.

How to Use

1
Adjust corners
Drag sliders to set the radius for each corner individually.
2
Preview the shape
See real-time updates on the live preview box.
3
Copy the CSS
Click Copy to grab the border-radius CSS code for your project.

Frequently Asked Questions

Q. How do I make a perfect circle with border-radius?

Set border-radius to 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50%. This creates a perfect circle regardless of the element size.

Q. What is the slash syntax in border-radius?

The slash separates horizontal and vertical radii to create elliptical corners. For example, border-radius: 10px / 20px creates corners that curve 10px horizontally and 20px vertically, producing an oval-like shape rather than a circular arc.

Q. Is border-radius supported in all browsers?

Yes. The border-radius property has been supported in all major browsers since IE9. Vendor prefixes like -webkit-border-radius are no longer needed for modern browser support.

Disclaimer: Results are for informational purposes only and do not constitute professional advice. Always consult qualified professionals for important decisions.

Back to Developer Tools