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 #E3E8F2

✄𐘗
tsx code block:
✄𐘗css`
  border: ${euiTheme.border.thin};
`

𐘂𐘂

✄𐘗✄𐘗

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

𐘂𐘂

Color

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

Only form specific borders use the euiTheme.colors.borderBasePlain color token instead.

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: #E3E8F2

✄𐘗
tsx code block:
✄𐘗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 #E3E8F2

✄𐘗
text code block:
✄𐘗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

✄𐘗
tsx code block:
✄𐘗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 ↵

𐘂𐘂