Border Color

Utility	Properties
Error: 429

This example showcases various border colors using the indigo colors from the default color palette.

• The bc-indigo-3 utility applies a lighter indigo shade to the border of an element.
• The bc-indigo utility applies the base indigo shade to the border of an element.
• The bc-indigo-8 utility applies a darker indigo shade to the border of an element.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-indigo-3 b-s d-16"></div>
  <div class="b-2 bc-indigo b-s d-16"></div>
  <div class="b-2 bc-indigo-8 b-s d-16"></div>
</div>

Border Bottom Color

Controls the color of the bottom border of an element.

Utility	Properties
Error: 429

This example showcases various border bottom colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-b-indigo-3 b-s d-16"></div>
  <div class="b-2 bc-b-indigo b-s d-16"></div>
  <div class="b-2 bc-b-indigo-8 b-s d-16"></div>
</div>

Border Left Color

Controls the color of the left border of an element.

Utility	Properties
Error: 429

This example showcases various border left colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-indigo-3 b-s d-16"></div>
  <div class="b-2 bc-indigo b-s d-16"></div>
  <div class="b-2 bc-indigo-8 b-s d-16"></div>
</div>

Border Right Color

Controls the color of the right border of an element.

Class name=“border-right-color” />

This example showcases various border right colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-r-indigo-3 b-s d-16"></div>
  <div class="b-2 bc-r-indigo b-s d-16"></div>
  <div class="b-2 bc-r-indigo-8 b-s d-16"></div>
</div>

Border Top Color

Controls the color of the top border of an element.

Utility	Properties
Error: 429

This example showcases various border top colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-t-indigo-3 b-s d-16"></div>
  <div class="b-2 bc-t-indigo b-s d-16"></div>
  <div class="b-2 bc-t-indigo-8 b-s d-16"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="bc-lead h:bc-indigo ..."></div>