Border Color
Controls the color of the borders of an element.
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>