Border Radius

Our border radius system creates visual softness and consistency. Use rounded corners to make interfaces feel friendly and modern.

Radius Scale

Six border radius values from subtle to fully rounded.

Small (sm)

4px

border-radius: 0.25rem

Base

4px

border-radius: 0.25rem

Medium (md)

6px

border-radius: 0.375rem

Large (lg)

8px

border-radius: 0.5rem

Extra Large (xl)

12px

border-radius: 0.75rem

2X Large (2xl)

16px

border-radius: 1rem

Full

9999px

border-radius: 9999px

Usage Guidelines

When to Use Each Radius

Border Radius Usage

Small (4px)

Subtle rounding for inputs, small buttons, and tight UI elements

Base (4px)

Default for most buttons, form fields, and interactive elements

Medium (6px)

Standard cards and containers with moderate rounding

Large (8px)

Large cards, panels, and prominent containers

Extra Large (12px)

Modal dialogs, feature cards, and hero sections

2X Large (16px)

Large imagery containers and decorative elements

Full (9999px)

Circular elements like avatars, badges, and pill-shaped buttons

Visual Examples

Button Variations

Card Examples

Large (8px)

Standard card rounding for most use cases

XL (12px)

More prominent card with extra rounding

2XL (16px)

Maximum rounding for decorative cards

Best Practices

Border Radius Guidelines

✓

Use consistent radius: Same element types should have the same radius

✓

Match nested elements: Inner elements should have slightly smaller radius

✓

Use full for circles: Avatars and badges work best with rounded-full

✗

Don't mix too many radii: Stick to 2-3 radius values per page

✗

Don't over-round: Excessive rounding can look unprofessional

Code Reference

CSS Custom Properties

:root {
  --radius-sm: 0.25rem;    /* 4px */
  --radius: 0.25rem;       /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Circular */
}

Tailwind CSS Classes

.rounded-sm { border-radius: 0.25rem; }    /* 4px */
.rounded { border-radius: 0.25rem; }       /* 4px */
.rounded-md { border-radius: 0.375rem; }   /* 6px */
.rounded-lg { border-radius: 0.5rem; }     /* 8px */
.rounded-xl { border-radius: 0.75rem; }    /* 12px */
.rounded-2xl { border-radius: 1rem; }      /* 16px */
.rounded-full { border-radius: 9999px; }   /* Circular */