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
| Token | CSS Variable | Value |
|---|---|---|
border.width.none | var(--nbhd-border-width-none) | 0 |
border.width.subtle | var(--nbhd-border-width-subtle) | 1px |
border.width.emphasis | var(--nbhd-border-width-emphasis) | 2px |
border.width.strong | var(--nbhd-border-width-strong) | 3px |
border.width.heavy | var(--nbhd-border-width-heavy) | 4px |
Radius
| Token | CSS Variable | Value |
|---|---|---|
border.radius.none | var(--nbhd-border-radius-none) | 0 |
border.radius.sm | var(--nbhd-border-radius-sm) | 2px |
border.radius.md | var(--nbhd-border-radius-md) | 6px |
border.radius.lg | var(--nbhd-border-radius-lg) | 12px |
border.radius.full | var(--nbhd-border-radius-full) | 9999px |