Token

Border Radius

Border radius tokens create consistent rounded corners across all components for a cohesive visual style.

Overview

Our radius scale provides a range of corner rounding options from sharp edges to fully rounded pills. The tokens reference the spacing scale to maintain consistency with other measurements in the system.

Radius Scale

Eight radius values covering all common use cases from sharp corners to circular elements.

--radius-none 0 Sharp corners, no rounding
--radius-xs 2px Subtle rounding for small elements
--radius-sm 4px Standard small radius
--radius-md 6px Default radius for most elements
--radius-lg 8px Cards, panels, larger components
--radius-xl 10px Prominent rounding
--radius-2xl 12px Large prominent rounding
--radius-full 9999px Fully rounded (pills, circles)

Usage

Apply radius tokens to create consistent rounded corners throughout your interface.

Basic Usage

.button {
  border-radius: var(--radius-md);
}

.card {
  border-radius: var(--radius-lg);
}

.pill {
  border-radius: var(--radius-full);
}

Individual Corners

/* Top corners only */
.header {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* Bottom corners only */
.footer {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

Nested Radius

When nesting rounded elements, the inner element should have a smaller radius than the outer element to maintain visual consistency.

Content
.outer {
  border-radius: var(--radius-lg);
  padding: var(--size-8);
}

.inner {
  /* Inner radius = outer radius - padding */
  border-radius: var(--radius-sm);
}

Guidelines

Choosing the Right Radius

Buttons --radius-md Standard interactive elements
Cards & Panels --radius-lg Container elements
Input fields --radius-md Form controls
Badges & Chips --radius-full Pill-shaped elements
Avatars --radius-full Circular profile images
Tooltips --radius-sm Small popover elements
Modals --radius-xl Large overlay dialogs

Best Practices

  • Use consistent radius values within the same component type
  • Larger elements generally use larger radius values
  • Use --radius-full for pill buttons and circular elements
  • Consider nested radius when elements contain other rounded elements
  • Avoid mixing too many different radius values on the same page