Border Radius Generator
Create CSS border-radius values with individual control over all four corners. See the result live, generate pill and circle shapes, and copy the CSS instantly.
CSS border-radius controls the roundness of element corners. Each corner can be set independently, and you can even create elliptical radii with the slash syntax (e.g., 50px / 25px). This tool generates the exact CSS for any shape from simple rounded cards to complex organic forms.
border-radius: 8px;
rounded-[8px] for arbitrary values.Frequently Asked Questions
Can I set different radii for each corner?
Yes. The tool provides independent sliders for top-left, top-right, bottom-right, and bottom-left corners.
How do I make a circle?
Set border-radius to 50% and make the element square (equal width and height) to create a perfect circle.
What is the CSS border-radius shorthand order?
border-radius shorthand follows: top-left, top-right, bottom-right, bottom-left (clockwise from top-left). With two values: top-left & bottom-right first, top-right & bottom-left second.
What does the slash syntax do in border-radius?
The slash syntax sets different horizontal and vertical radii per corner — e.g., border-radius: 50px / 25px creates elliptical corners. This enables organic, blob-like shapes.