borders #
Border variables integrate with the theme system and adapt to color scheme. Alpha borders are tuned for visual balance: dark mode uses higher alpha because light-on-dark has lower perceived contrast.
Border style #
--border_style is global - asides, blockquotes, and form fields all read it.
Buttons take --button_border_style instead (defaulting to var(--border_style)), and swap to --button_border_style_active while
pressed. Buttons are the only element with a pressed state, so only they get the pair.
That pair makes beveled chrome expressible, since border-style's inset and outset derive their light and dark edges from the border
color. Raised buttons that press in, over sunken fields:
variables: [
{name: 'border_style', light: 'inset'}, // sunken fields
{name: 'button_border_style', light: 'outset'}, // raised buttons
{name: 'button_border_style_active', light: 'inset'} // that press in
] The guestbook theme is built on exactly this.
Tinted alpha borders #
The border_color_NN variables provide tinted alpha borders that integrate with
the theme. They use hue_neutral for cohesion.
Opaque borders with shades #
For opaque borders, use shade variables directly. This avoids alpha transparency but requires inline styles or custom classes:
/* inline style */
border-color: var(--shade_30);
/* or set the contextual variable */
--border_color: var(--shade_30);Border colors #
Classes like .border_a_50 apply the palette variables
(--palette_a_50) to borders. The intensity controls the color's
prominence.
Border widths #
Outlines #
Each border utility class has a corresponding outline variant (like outline_b_50, outline_width_4, and outline-style:solid). The letterless classes
differ, though: border_color_50 is the translucent border ramp, while outline_color_50 is the opaque shade ramp. There are also two special outline
variables:
Focus rings draw with --outline_style (default solid), so a theme
can dot or dash every ring at once.
Border radius #
Border variables with token classes.
Each tier is the base radius times --radius_scale, floored at --border_radius_min. Buttons and form fields other than checkboxes read --control_radius (the sm tier by default), so a theme can round its
controls apart from its panels:
Custom values #
Border literal classes for open-ended values: