CSS Border Radius Generator: A CSS border-radius generator lets you visually round the corners of an element and instantly copy the exact CSS code. Drag the sliders for each corner, preview the shape live, and copy ready-to-use border-radius CSS — no manual trial-and-error.
Frequently Asked Questions
What is border-radius in CSS?
border-radius is a CSS property that rounds the corners of an element's outer border edge. You can set one value for all corners or four values for the top-left, top-right, bottom-right and bottom-left corners individually.
How do I make a perfect circle with border-radius?
Set border-radius to 50% on an element that has equal width and height. For a pill or capsule shape on a rectangle, use a large pixel value such as 9999px.
Can I set different radius for each corner?
Yes. border-radius accepts up to four values in the order top-left, top-right, bottom-right, bottom-left. This generator gives you a separate control for each corner and writes the shorthand automatically.
Does border-radius work in all browsers?
Yes. border-radius is supported in all modern browsers including Chrome, Firefox, Safari and Edge, and has been standard since 2011, so no vendor prefixes are needed today.