CSS Border Radius Generator
Design ToolsGenerate border-radius CSS
200px
Top Left
px
Top Right
px
Bottom Right
px
Bottom Left
px
border-radius: 16px;About CSS Border Radius Generator
Fine-tune border-radius for each corner with visual preview and presets.
Frequently Asked Questions
What is CSS border-radius and how does it work?
CSS border-radius is a property that rounds the corners of an element. You can set a single value for all four corners or specify each corner individually using border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
How do I make a perfect circle with border-radius?
To create a perfect circle, set border-radius to 50% on a square element (equal width and height). This tool includes a Circle preset that sets all four corners to 50% for you.
What is a squircle and how do I create one?
A squircle is a shape between a square and a circle, commonly used in modern UI design (like iOS app icons). You can approximate it with specific border-radius values around 30-40% on each corner, which this tool provides as a preset.
Is my data safe?
Yes! All processing happens entirely in your browser. Your data is never sent to any server. No data is collected, stored, or transmitted.
Can I use different values for each corner?
Absolutely. Click the unlink button to adjust each corner independently. You can set unique radius values for top-left, top-right, bottom-right, and bottom-left corners to create asymmetric shapes.
Ad
728 × 90