📪Border Color
The following utility classes control the border color of elements:
.border-{color}
.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 border-red">
<!-- Content with red border color -->
</div>
.border-t-{color}
.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 border-t-blue">
<!-- Content with blue top border color -->
</div>
.border-b-{color}
.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 border-b-green">
<!-- Content with green bottom border color -->
</div>
.border-l-{color}
.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 border-l-purple">
<!-- Content with purple left border color -->
</div>
.border-r-{color}
.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 border-r-orange">
<!-- Content with orange right border color -->
</div>
.border-x-{color}
.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 border-x-gray">
<!-- Content with gray horizontal border color -->
</div>
.border-y-{color}
.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 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.
Last updated