Skip to main content

Border Tokens

Border tokens control corner radius, border width, and border color used throughout components.

Border Radius

Token Default Value Usage
--txds-border-radius 4px Button, input, card corners
--txds-border-radius-lg 8px Larger elements (panels, modals)
--txds-border-radius-xxl 36px Pill-shaped elements (search bar)

Visual Examples

--txds-border-radius4px
--txds-border-radius-lg8px
--txds-border-radius-xxl36px

Border Width & Color

Token Default Value
--txds-border-width 1px
--txds-border-color #dfe1e2

Visual Examples

--txds-border-width1px
Example line2px
Example line4px