The Force Design Spec / Radius

Border Radius

Border radius scale for consistent rounding across components. Use semantic aliases (radius.button, radius.card) when building components.

Raw Scale

--force-radius-none 0px

No rounding.

--force-radius-sm 0.25rem

4px. Small rounding for subtle badges.

--force-radius-md 0.375rem

6px. Default for buttons and inputs.

--force-radius-lg 0.5rem

8px. Cards, containers.

--force-radius-xl 0.75rem

12px. Modals, large panels.

--force-radius-full 9999px

Pill shape. Pill badges, avatars, tags.

Semantic Aliases

--force-radius-button 0.375rem

Button border radius. Alias for radius.md.

--force-radius-input 0.375rem

Input border radius. Alias for radius.md.

--force-radius-card 0.5rem

Card border radius. Alias for radius.lg.

--force-radius-modal 0.75rem

Modal border radius. Alias for radius.xl.

--force-radius-badge 9999px

Badge border radius. Pill shape by default.