Borders

Border tokens define the edges and corners of Cornerstone components. They use rem units so they scale with root font size. You can adjust individual tokens or use scale multipliers to change all widths or radii at once.

Border Style

A single style token controls the line type used for all component borders throughout the library.

Custom Property	Description	Preview
--cs-border-style	Standard border line style used across all components

Border Width

Border width tokens use rem units and are scaled by --cs-border-width-scale. Values below 1 make all borders thinner; values above 1 make them thicker.

Custom Property	Description	Preview
--cs-border-width-scale	Global multiplier for all border width calculations	—
--cs-border-width-s	Thin border, used for most component outlines
--cs-border-width-m	Medium border, used for emphasized borders
--cs-border-width-l	Thick border, used for prominent outlines

Border Radius

Border radius tokens control the corner rounding of components. Size-based tokens use rem units and scale with --cs-border-radius-scale. Values below 1 make corners sharper; values above 1 make them rounder. Shape tokens provide fixed shapes regardless of the scale.

Custom Property	Description	Preview
--cs-border-radius-scale	Global multiplier for all border radius calculations	—
--cs-border-radius-s	Small corner rounding, for compact components like badges and checkboxes
--cs-border-radius-m	Medium corner rounding, the default for most inputs and buttons
--cs-border-radius-l	Large corner rounding, for cards and panels
--cs-border-radius-pill	Fully rounded ends, creating a pill shape regardless of element size
--cs-border-radius-circle	Perfectly circular shape; element must have a 1:1 aspect ratio
--cs-border-radius-square	No corner rounding; sharp, square corners