Borders

Two families that shape the same edge: how a surface rounds its corners, and the lines that draw its boundary. Every chip below is the token itself, rendered live.

Colors

Alpha tints of the ink for the neutral edges — and four status borders that consume the functional pairs, flipping with the theme like the text tones.

--border-subtle

Section dividers and quiet boundaries.

--border-default

Standard inputs and secondary borders.

--border-strong

Active rules and prominent dividers.

--border-focus

Keyboard focus — solid ink.

--border-disabled

Disabled controls and inactive edges.

--border-danger

Invalid inputs and error edges.

--border-success

Positive and confirmed edges.

--border-warning

Caution edges.

--border-info

Informational edges.

Positions

A border holds one side or all four — dividers are the bottom side, accent edges the left. Drawn at the strong width here so the side reads.

--border-position-full

Full

--border-position-top

Top

--border-position-right

Right

--border-position-bottom

Bottom

--border-position-left

Left

Radius

Eight corners, from square to pill. The corner follows the surface: controls round less, backgrounds round more.

--radius-0

0pt — Square — data grids, tables, aligned edges.

--radius-1

2pt — Hairline rounding — tiny chips and figures.

--radius-2

4pt — Compact controls — badges, small inputs.

--radius-3

6pt — Default controls — buttons, fields, tiles.

--radius-4

8pt — Raised backgrounds — cards and panels.

--radius-5

12pt — Large backgrounds — bands and sheets.

--radius-6

16pt — Modals and overlays.

--radius-full

999pt — Pill — badges, avatars, toggles.

Styles

Four styles: no border, the line, and the two broken lines. Dashed marks drop targets and empty wells; dotted is available but not yet consumed.

--border-style-none

No edge — content holds together without a line.

--border-style-line

The default — every edge, divider and rule.

--border-style-dashed

Drop targets and empty wells — DropZone, Empty State.

--border-style-dotted

Available for fine visual rhythms — not yet consumed by a component.

Widths

Two frozen widths carry every border in the system. They are constants, not choices — components never size a border themselves.

--border-width

The standard hairline — every edge and divider draws at this width. Drawn in solid ink here so the width reads.

--border-width-strong

The strong hairline — accent edges and emphasized rules.