Free to use, no account
CSS Border Radius Generator
Shape each corner independently, including elliptical horizontal and vertical radii. Preview the result and copy compact CSS.
How do I generate CSS border-radius values?
Choose pixels or percentages, adjust the horizontal and vertical radius for each corner, then copy the generated border-radius declaration. CSS may proportionally normalize overlapping radii to fit the element.
Frequently asked questions
How do I generate CSS border-radius values?
Choose pixels or percentages, adjust the horizontal and vertical radius for each corner, then copy the generated border-radius declaration. CSS may proportionally normalize overlapping radii to fit the element.
Is my CSS or design uploaded?
No. The preview and CSS are generated in this browser tab. There is no upload, account, API call or automatic save.
Can each corner have a different radius?
Yes. Set a separate horizontal and vertical value for the top-left, top-right, bottom-right and bottom-left corners.
What does the slash in border-radius mean?
It separates horizontal radii from vertical radii, creating elliptical corners. If each corner uses the same horizontal and vertical value, the generator omits the slash.
Why may the preview look smaller than the values?
CSS proportionally normalizes radii that would overlap at an edge. That is standard browser behavior and is also applied in this preview.