Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
    • Theme provider
    • Tokens
      • Borders
      • Breakpoints
      • Colors
      • Sizing
      • Typography
    • Color mode
    • High contrast mode
    • Utilities
  • Working with Emotion
  • Accessibility
  • Testing
  • EUI
  • Theming
  • Tokens
  • Borders

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.

Edit this page

Previous
Theme provider
Next
Breakpoints
  • Types
    • euiTheme.border[type] token
  • Color
    • euiTheme.border.color token
  • Width
    • euiTheme.border.width[size] token
  • Radius
    • euiTheme.border.radius[size] token
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic