Utility classes for changing an element's border colour property.

Border colour classes are assigned using USS colour variables from the master colour palette. To see all colours with a visual representation with HEX values, check out All Doddle USS Colours.

Classes for border colour are named using the format: [b]-[colour]-[luminance].

Where colour includes:

  • transparent - for border-color: var(--transparent)
  • white - for border-color: var(--white)
  • black - for border-color: var(--black)
  • gray - for border-color: var(--gray-##)
  • red - for border-color: var(--red-##)
  • orange - for border-color: var(--orange-##)
  • amber - for border-color: var(--amber-##)
  • yellow - for border-color: var(--yellow-##)
  • lime - for border-color: var(--lime-##)
  • green - for border-color: var(--green-##)
  • spring - for border-color: var(--spring-##)
  • cyan - for border-color: var(--cyan-##)
  • teal - for border-color: var(--teal-##)
  • steel - for border-color: var(--steel-##)
  • azure - for border-color: var(--azure-##)
  • blue - for border-color: var(--blue-##)
  • indigo - for border-color: var(--indigo-##)
  • purple - for border-color: var(--purple-##)
  • magenta - for border-color: var(--magenta-##)
  • pink - for border-color: var(--pink-##)
  • rose - for border-color: var(--rose-##)

Where luminance includes:

  • # - luminance value for the colour. By default, border color classes start at 5% luminance, and increment by 5% for the first/last step, and 10% for following steps until stopping at 95%.
ClassContents

All colour variables pull from Doddle's default colour palette defined in doddle-palette.tss. All colour variables can be customized to fit your needs. Learn more about Customizing the Colour Palette.

b-spring-40
b-azure-60
b-purple-60
b-rose-60

UXML