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

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

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

Where color 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 color. 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 color variables pull from Doddle's default color palette defined in doddle-palette.tss. All color variables can be customized to fit your needs. Learn more about Customizing the Color Palette.

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

UXML