📪Border Color

Border Color Utility Classes

The following utility classes control the border color of elements:

.border-{color} Sets the border-color property to the specified color value for all sides of the element.

CSS equivalent: border-color: {color};

Example usage:

<div class="border-red">
  <!-- Content with red border color -->
</div>

---

.border-t-{color} Sets the border-top-color property to the specified color value, controlling the top border color of the element.

CSS equivalent: border-top-color: {color};

Example usage:

<div class="border-t-blue">
  <!-- Content with blue top border color -->
</div>

---

.border-b-{color} Sets the border-bottom-color property to the specified color value, controlling the bottom border color of the element.

CSS equivalent: border-bottom-color: {color};

Example usage:

<div class="border-b-green">
  <!-- Content with green bottom border color -->
</div>

---

.border-l-{color} Sets the border-left-color property to the specified color value, controlling the left border color of the element.

CSS equivalent: border-left-color: {color};

Example usage:

<div class="border-l-purple">
  <!-- Content with purple left border color -->
</div>

---

.border-r-{color} Sets the border-right-color property to the specified color value, controlling the right border color of the element.

CSS equivalent: border-right-color: {color};

Example usage:

<div class="border-r-orange">
  <!-- Content with orange right border color -->
</div>

---

.border-x-{color} Sets the border-left-color and border-right-color properties to the specified color value, controlling the horizontal border color of the element.

CSS equivalent: border-left-color: {color}; border-right-color: {color};

Example usage:

<div class="border-x-gray">
  <!-- Content with gray horizontal border color -->
</div>

---

.border-y-{color} Sets the border-top-color and border-bottom-color properties to the specified color value, controlling the vertical border color of the element.

CSS equivalent: border-top-color: {color}; border-bottom-color: {color};

Example usage:

<div class="border-y-pink">
  <!-- Content with pink vertical border color -->
</div>

These utility classes allow you to easily control the border color of elements, providing flexibility in styling the borders according to your design requirements.