Skip to main content

Borders

Borders serve as essential visual elements that define boundaries, create structure, and enhance the clarity of user interfaces.

Borders

All borders are provided as custom properties. To access them the var() CSS function can be called with the border's name:

.some-example {
  border: var(--theme-primary-bdr-1);
}
  • --theme-contrast-bdr is the darkest/lightest possible color and should be used in situations where the background color is hard to control (e.g. on custom colors)
  • --theme-color-hard-bdr is used whenever the border should be a solid, non-transparent color
  • --theme-color-std-bdr has a strong appearance and is used e.g. on input components
  • --theme-color-soft-bdr is more subtle and used on cards and similar components or for separators
  • --theme-color-weak-bdr is even more subtle and used for separations of, e.g., entire screen areas
  • --theme-color-x-weak-bdr can be used for very subtle separations or content structuring