Borders

The border tokens contain both individual border property values and full shorthand border properties.

Types

euiTheme.border[type] token

These common border types string together the base properties of color, width and style to form common full border properties.

border: 1px solid #D3DAE6

css`
  border: ${euiTheme.border.thin};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
border.thin ↦	border.thin ↦	Value 1px solid #D3DAE6 ↵
border.thick ↦	border.thick ↦	Value 2px solid #D3DAE6 ↵
border.editable ↦	border.editable ↦	Value 2px dotted #D3DAE6 ↵

𐘂𐘂

Color

EUI only has one base color it uses for all borders (or calculated borders).

euiTheme.border.color token

Color for all borders; Default is colors.lightShade

You can apply this color directly to any border-color property.

border-color: #D3DAE6

css`
  border-color: ${euiTheme.border.color};
`

Width

euiTheme.border.width[size] token

These basic properties make up the border thickness which can be used individually or in conjunction withborder.color.

border: 2px dashed #D3DAE6

css`
  border: ${euiTheme.border.width.thick} dashed ${euiTheme.border.color};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
border.width.thin ↦	border.width.thin ↦	Value 1px ↵
border.width.thick ↦	border.width.thick ↦	Value 2px ↵

𐘂𐘂

Radius

euiTheme.border.radius[size] token

These basic properties make up the corner radii which can be used individually.

border-radius: 6px

css`
  border-radius: ${euiTheme.border.radius.medium};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
border.radius.small ↦	border.radius.small ↦	Value 4px ↵
border.radius.medium ↦	border.radius.medium ↦	Value 6px ↵

𐘂𐘂