toolkit

Border Radius

Runs in browser

Design CSS border-radius visually

Unit
Presets

How to Use

Adjust corner radii independently or linked.

You will see:

  • Shape Preview
  • Generated CSS Output
  • Copy Button
Preview

CSS

border-radius: 8px;

About CSS Border Radius

Border radius creates rounded corners on elements. From subtle rounding to full circles, this property shapes the visual feel of your interface.

Syntax Variations

/* All corners */
border-radius: 8px;

/* Per corner */
border-radius: 8px 16px 8px 16px;

/* Elliptical */
border-radius: 50% 50% 0 0;

/* Complex shapes */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Common Values

  • 4px: Subtle rounding for inputs
  • 8px: Standard for cards and buttons
  • 12-16px: More pronounced rounding
  • 50%: Creates circles and pills
  • 9999px: Guaranteed pill shape

💡 Pro Tips

  • Use consistent radius scale across your design system
  • Inner elements should have smaller radius than outer
  • Use CSS variables for consistent values
  • Combine with overflow: hidden for clipping content

Further Reading