Backgrounds & Borders Utilities
Utilities for styling backgrounds, borders, divide lines, outline rings, and corner radii.
Background Colors
NUICSS provides semantic background utilities that dynamically adapt to theme changes:
| Class | Properties |
|---|---|
bg-page | background-color: var(--bg-page); |
bg-surface | background-color: var(--bg-surface); |
bg-subtle | background-color: var(--bg-subtle); |
bg-muted | background-color: var(--bg-muted); |
bg-primary | background-color: var(--color-primary); |
bg-transparent | background-color: transparent; |
bg-white | background-color: #ffffff; |
bg-black | background-color: #000000; |
Border Width & Style
| Class | Properties |
|---|---|
border | border-width: 1px; border-style: solid; |
border-0 | border-width: 0px; |
border-2 | border-width: 2px; border-style: solid; |
border-4 | border-width: 4px; border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
Border Colors
| Class | Properties |
|---|---|
border-default | border-color: var(--border-default); |
border-subtle | border-color: var(--border-subtle); |
border-primary | border-color: var(--color-primary); |
border-transparent | border-color: transparent; |
Border Radius
| Class | Properties |
|---|---|
rounded-none | border-radius: 0px; |
rounded-sm | border-radius: var(--radius-sm, 4px); |
rounded | border-radius: 0.25rem; |
rounded-md | border-radius: var(--radius-md, 8px); |
rounded-lg | border-radius: var(--radius-lg, 12px); |
rounded-xl | border-radius: var(--radius-xl, 16px); |
rounded-full | border-radius: 9999px; |