Borders

There are 6 border types used throughout the design system with varying border widths depending on their function and the associated component. Borders styles include inner borders, inner focus, inset focus, outer focus, error states, and elevation. When borders are used in dropdowns or for blur, focus, hover, active or error states they should be paired with an animation.

CSS Variables

var(--ds-border-inner-default)
var(--ds-border-inner-medium)
var(--ds-border-inner-focus)
var(--ds-border-inset-focus)
var(--ds-border-outer-focus)
var(--ds-border-error)
var(--ds-border-outer-elevation-small)
var(--ds-border-outer-elevation-medium)