CSS Border Radius Generator
Round corners and copy the border-radius CSS.
border-radius: 20px;
How to use the CSS Border Radius Generator
- 1 Drag the slider to round all corners together, or unlink to set each corner.
- 2 Watch the live preview update.
- 3 Copy the generated border-radius CSS.
Examples
- ▸ Pill-shaped buttons with a large uniform radius.
- ▸ A card with a single rounded corner for a chat-bubble look.
Frequently asked questions
Can I round each corner differently?
Yes. Turn off “Link all corners” to set the top-left, top-right, bottom-right and bottom-left radii independently. The tool outputs the four-value shorthand.
How do I make a perfect circle or pill?
For a circle, set border-radius to 50% on a square element. For a pill button, use a radius at least half the element’s height (a large px value works too).
Related tools
Generators
CSS Box Shadow Generator
Build CSS box shadows and copy the code.
Generators
CSS Gradient Generator
Design CSS gradients and copy the code.
Generators
Color Palette Generator
Build harmonious color schemes from one base color.
Generators
Favicon Generator
Turn a letter or emoji into a favicon.
Developer
PX to REM Converter
Convert pixels and rem with a custom root size.
Generators
Glassmorphism CSS Generator
Design a frosted-glass UI card and copy the CSS.