Border Radius Generator - Create Perfect Rounded Corners
Free online border radius generator. Create custom rounded corners with individual corner control. Generate circles, pills, and complex border shapes with live preview.
Border Radius Preview
Corner Settings
CSS Code
border-radius: 0px;
What is Border Radius?
The CSS border-radius property rounds the corners of an element's outer border edge. You can control each corner individually or set all corners at once. Border radius is essential for modern, friendly UI design.
Common Border Radius Values
- 4-8px: Subtle rounding for buttons and cards
- 12-16px: Medium rounding for modern UI elements
- 50%: Perfect circles (for square elements)
- 999px: Pill shapes for buttons
Best Practices
- Use consistent border radius values across your design
- Larger elements can handle larger border radius values
- Consider accessibility - don't make clickable areas too small
- Test on different screen sizes