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

Related Tools