← CSS Tools
⬜
Border Radius Generator
Visually set CSS border-radius with sliders for each corner and see a live preview. Generates the exact CSS you need for rounded corners, pills and custom shapes.
16px
16px
16px
16px
border-radius: 16px 16px 16px 16px;
How to Use
1
Drag the sliders
Use the four sliders to set the border-radius for each corner (top-left, top-right, bottom-right, bottom-left).
2
See live preview
The preview box updates in real time to show exactly how your element will look.
3
Copy the CSS
Click Copy CSS to grab the generated border-radius property and paste it into your stylesheet.