Border variables control visual boundaries between components like buttons, cards, input fields, and other UI elements. These are divided into:
These values can be applied using variables or utility classes, and may vary between projects depending on style preferences.
Border color variables follow a naming pattern based on surface context or visual intent.
These colors reference the foundational colors like Neutral or Accent and may include opacity (e.g. Neutral Inverse A50). The exact mapping is managed in the Variables panel.
Border color variables are applied to style the border or box shadow style of elements. For example, dividers and input fields are using border styles. Buttons and cards components are using box shadow styles.
Radius variables define how rounded the corners of elements should be. These values are used consistently across cards, buttons, input fields, etc.
Common radius sizes:
To apply or override border radius styles consistently across elements, use the available utility classes. You can find the full list and usage examples in the Border Radius Utilities section.