Simple – Border colors
Key point: Stylize your content with different border colors by using an available inline label and block label or by creating a custom label with a hex color.

Inline labels available

  •  Inline label: border-primary (the theme primary color)
  •  Inline label: border-secondary (the theme secondary color)
  •  Inline label: border-accent (the theme accent color)
  •  Inline label: border-red
  •  Inline label: border-orange
  •  Inline label: border-yellow
  •  Inline label: border-green
  •  Inline label: border-blue
  •  Inline label: border-indigo
  •  Inline label: border-violet
  •  Inline label: border-white
  •  Inline label: border-grey-light
  •  Inline label: border-grey
  •  Inline label: border-grey-dark
  •  Inline label: border-black

Block labels available

  • Block label: border-primary
  • Block label: border-secondary
  • Block label: border-accent
  • Block label: border-red
  • Block label: border-orange
  • Block label: border-yellow
  • Block label: border-green
  • Block label: border-blue
  • Block label: border-indigo
  • Block label: border-violet
  • Block label: border-white
  • Block label: border-grey-light
  • Block label: border-grey
  • Block label: border-grey-dark
  • Block label: border-black

Hex colors

You can also use hex color by creating a custom label with the prefix border-hex-

  •  Inline label: border-hex-0000ff (for blue).
  • Block label: border-hex-0000ff (for blue).

For developers: Developers can configure custom labels in the label configuration. 

See in action

View border colors demo.