Foundation

Border

Border radius and border width tokens.

Generated from css-library v0.34.1 (Tue, 04 Aug 2026 20:19:43 GMT).

Named border radius

Named sizes and keywords, mostly aliasing the numeric scale below. Prefer these in new work.

Token Value Notes

vads-border-radius-sm 2px
vads-border-radius-2px Border radius for controls such as checkboxes. From USWDS.

vads-border-radius-md 0.25rem (4px)
vads-border-radius-0p5 Border radius for controls such as buttons and other interactive elements. From USWDS.

vads-border-radius-lg 0.5rem (8px)
vads-border-radius-1 Border radius for modals. From USWDS.

vads-border-radius-round 99rem (1584px) Fully rounded corners, for pills and circular elements.

The numeric unit scale plus fixed pixel values.

Token Value Notes

vads-border-radius-0 0 Border radius scale step 0 (square corners).

vads-border-radius-2px 2px Hairline border radius (2px).

vads-border-radius-0p5 0.25rem (4px) Border radius scale step 0.5.

vads-border-radius-1 0.5rem (8px) Border radius scale step 1.

vads-border-radius-1p5 0.75rem (12px) Border radius scale step 1.5.

vads-border-radius-2 1rem (16px) Border radius scale step 2.

vads-border-radius-2p5 1.25rem (20px) Border radius scale step 2.5.

vads-border-radius-3 1.5rem (24px) Border radius scale step 3.

Token Value Notes

vads-border-width-0 0 Border width scale step 0 (no border).

vads-border-width-1px 1px
uswds-system-spacing-1px Hairline border width (1px).

vads-border-width-2px 2px
uswds-system-spacing-2px Hairline border width (2px).

vads-border-width-0p5 0.25rem (4px) Border width scale step 0.5.

vads-border-width-1 0.5rem (8px) Border width scale step 1.

vads-border-width-1p5 0.75rem (12px) Border width scale step 1.5.

vads-border-width-2 1rem (16px) Border width scale step 2.

vads-border-width-2p5 1.25rem (20px) Border width scale step 2.5.

vads-border-width-3 1.5rem (24px) Border width scale step 3.

Edit this page in GitHub (Permissions required)

Last updated: Jul 06, 2026