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

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

• Default is colors.lightShade
• In high contrast mode, this value becomes colors.fullShade and cannot be overridden.

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: 4px

✄𐘗
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 4px ↵

𐘂𐘂

We recently reduced border.radius.medium in size

It is now the same as border.radius.small. We plan to

update or remove the small size. In the meantime, use border.radius.medium.