Border Radius Generator
Shape Ideas
• Pill shape: 50% on all corners
• Rounded square: 10-20px on all corners
• Speech bubble: 0px on one corner
• Card design: Different values for each corner
border-radius: 10px 10px 10px 10px;About this Tool
Design perfect rounded corners with individual control over each corner. Create everything from subtle rounded squares to pill-shaped elements and unique organic shapes.
How does it work? Maps slider values to CSS border-radius property. Supports both px and % units with optional corner linking.
- Choose between px or % units
- Toggle "Link all corners" to control all corners together
- Adjust individual corner sliders for custom shapes
- Watch the live preview update in real-time
- Copy the generated CSS code
- Creating modern card designs
- Designing pill-shaped buttons
- Building organic, rounded UI elements
- Creating speech bubble shapes
- Individual control for each corner
- Link corners option for uniform rounding
- Support for both px and % units
- Real-time visual preview
- Shape ideas and tips included
Border-radius rounds corners by specifying radius values. Can be uniform or individual per corner (top-left, top-right, bottom-right, bottom-left).
Negative values?
Not supported; radius must be positive.
Complex shapes?
Use different values per corner.
Performance?
Border-radius is well-optimized.
All calculations and data processing for this tool are performed locally in your browser. We do not send any of your data to our servers, ensuring your information remains private and secure.