Logo

Border Radius Generator

Create beautiful border-radius CSS with real-time preview and multiple output formats

Settings

Corner Values

px
px
px
px

Presets

Preview

border-radius: 16px 16px 16px 16px

CSS Code

border-radius: 16px 16px 16px 16px;

Corner Values

Top Left: 16px
Top Right: 16px
Bottom Right: 16px
Bottom Left: 16px

How to Use the Border Radius Generator

Getting Started

The border-radius generator allows you to create custom CSS border-radius values with real-time preview. Here's how to use it effectively:

  • Adjust Individual Corners: Use the sliders or number inputs to set values for each corner independently
  • Sync Corners: Enable "Sync All Corners" to apply the same value to all corners simultaneously
  • Change Units: Switch between px, rem, em, %, vw, and vh units depending on your use case
  • Use Presets: Quick access to common border-radius values like rounded, pill, or circle shapes

Border Radius Tips

  • Small values (2-8px): Perfect for subtle corners on buttons and input fields
  • Medium values (12-24px): Great for cards and containers
  • Large values (32px+): Create dramatic rounded effects for modern designs
  • Percentage values: Use 50% for perfect circles or ellipses
  • Asymmetric values: Create unique shapes by setting different values for each corner

Common Use Cases

Rounded Buttons

Use 6-8px for standard buttons, or 9999px for pill-shaped buttons.

  • Standard: 8px border-radius
  • Pill button: 9999px border-radius

Card Components

Medium values work best for cards and content containers.

  • Subtle cards: 12px border-radius
  • Modern cards: 16-24px border-radius

Avatar Images

Create perfect circles for profile pictures and avatars.

  • Circle avatar: 50% border-radius
  • Squared avatar: 8-12px border-radius

CSS Output Formats

  • Shorthand: Most common format - border-radius: 16px;
  • Individual: Separate properties for each corner
  • Tailwind CSS: Utility classes for Tailwind projects
  • Copy & Paste: One-click copying to clipboard for easy integration

Pro Tips

  • Use responsive units like % or rem for better scalability across devices
  • Test border-radius with different background colors to ensure visual consistency
  • Combine with box-shadow for enhanced depth and visual hierarchy
  • Consider accessibility - very rounded corners may affect readability for some users
  • Use the preview to test how your border-radius looks with actual content