◳
CSS Border Radius Generator
Visually adjust border-radius for each corner with live preview
Top Left20px
Top Right20px
Bottom Right20px
Bottom Left20px
border-radius: 20px;What is CSS Border Radius Generator?
CSS Border Radius Generator lets you visually adjust the border-radius for each corner of an element independently with a live preview. Create perfectly rounded corners, pill shapes, organic blob shapes, or any custom curve. The tool generates the exact CSS code you need, including shorthand and individual corner properties.
How to Use This Tool
- Drag the sliders to adjust each corner's border-radius independently
- Use the link toggle to apply the same radius to all corners at once
- Preview the shape in real time as you adjust values
- Copy the generated border-radius CSS property
Common Use Cases
- Creating rounded card components with consistent corner radii
- Designing pill-shaped buttons and tag elements
- Building organic shapes and asymmetric rounded containers
- Generating circular avatar or profile image containers
Frequently Asked Questions
How do I make a perfect circle with border-radius?
Set border-radius to 50% on a square element (equal width and height). This curves all four corners equally to form a perfect circle.
Can I set different radii for each corner?
Yes. CSS allows individual values: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. This tool makes it visual.