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)

Inline tags, fine details, tight UI elements

Base (4px)

Same value as Small. Tailwind's default rounded.

Medium (6px)

Small chips, minimal rounding

Large (8px)

Buttons, form fields, dropdowns

Extra Large (12px)

Cards, panels, modals, feature blocks

2X Large (16px)

Hero cards, marketing blocks, large decorative containers

Full (9999px)

Pills, badges, avatars, circular elements

Visual Examples

Button Variations

Card Examples

Large (8px)

Buttons and form fields. Not the standard card size.

XL (12px)

Standard card, panel, modal. The dominant container shape.

2XL (16px)

Hero cards and marketing blocks

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 */