Border

Properties for consistent object styles and states.

Border colour

To add a design system border colour in code, you can use the generic ds-color sass function and pass in “border” as the first parameter, e.g. to return the default border:
ds-color(“border”, default”).

For the second parameter you can pass in the following semantic names to return the corresponding border colour for your theme.

color / border

#cad0d3

default

Used to outline container, cards or as separators.

#dde2e4

muted

Muted border color for sitations where a hint of a border is enough. Not accessible.

#7a8b90

strong

Strong border used to for specific UI elements with contrast requirements like e.g. Input, Checkbox or RadioButton.

#dde2e4

disabled

#00a2ba

interactive

Selected and active borders.

#378c87

success

Use as borders on success components such as text inputs.

#e20f3a

danger

Default error border color. Use to highlight validation errors or critical situtions in flows e.g. a mandatory input field left empty.

rgba(255,255,255,0.32)

on-color

rgba(255,255,255,0.16)

on-color-muted

Border radius

To add a design system border radius in code, you can use the ds-border-radius sass function.

This will return the corresponding design system token value.

Code	Value
ds-border-radius(“xs”)	2px
ds-border-radius(“sm”)	4px
ds-border-radius(“md”)	8px
ds-border-radius(“lg”)	12px
ds-border-radius(“round”)	999px

Border width

To add a design system border width in code, you can use the ds-border-width sass function.

This will return the corresponding design system token value.

Code	Value
ds-border-width(0)	0
ds-border-width(1)	1px
ds-border-width(2)	2px
ds-border-width(3)	4px
ds-border-width(4)	6px