CSS Border Radius Generator
Set rounded corners for each corner or all at once, in pixels or percent. Preview shapes from soft cards to pills, leaves and circles, and copy the CSS.
How to use the border radius generator
- Keep Same for all corners ticked for an even shape, or untick it to set each corner.
- Move the sliders and pick pixels or percent.
- Switch the preview shape to see the effect on a card, square or button.
- Copy the CSS, or use the same values in Elementor’s Border Radius setting.
Common shapes
| Shape | CSS |
|---|---|
| Soft card | border-radius: 12px to 16px |
| Pill button | border-radius: 999px |
| Circle | border-radius: 50% on a square |
| Leaf | border-radius: 40px 4px 40px 4px |
| Rounded top only | border-radius: 16px 16px 0 0 |
Design tip
Pick a radius scale and use it everywhere, such as 8 px for inputs, 12 px for buttons and 16 px for cards. Consistent corners make a site feel polished. Nested elements look best when the inner radius is slightly smaller than the outer one.
Related tools
Add depth with the box shadow generator, design buttons with the CSS button generator, and add gradients with the CSS gradient generator.
More free tools and guides
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this border radius generator free?
Yes. It is free with no sign-up and works in your browser.
What is the order of the four values?
Top left, top right, bottom right, bottom left, going clockwise.
How do I make a perfect circle?
Use a square element with border-radius: 50%.
Should I use px or percent?
Pixels keep corners the same on any size. Percent scales with the element, useful for circles and blobs.