Skip to main content
Neighborhood Design System v5.0.0-rc.2

Borders

Available border styling values.

Border widths and corner radii are tokens, so brand themes can make components sharper or softer without changing component styles.

.card {
  border: var(--nbhd-border-width-subtle) solid currentColor;
  border-radius: var(--nbhd-border-radius-md);
}

Width

TokenCSS VariableValue
border.width.nonevar(--nbhd-border-width-none)0
border.width.subtlevar(--nbhd-border-width-subtle)1px
border.width.emphasisvar(--nbhd-border-width-emphasis)2px
border.width.strongvar(--nbhd-border-width-strong)3px
border.width.heavyvar(--nbhd-border-width-heavy)4px

Radius

TokenCSS VariableValue
border.radius.nonevar(--nbhd-border-radius-none)0
border.radius.smvar(--nbhd-border-radius-sm)2px
border.radius.mdvar(--nbhd-border-radius-md)6px
border.radius.lgvar(--nbhd-border-radius-lg)12px
border.radius.fullvar(--nbhd-border-radius-full)9999px
Esc
↑ ↓ to move↵ to open