📪Border width

The following utility classes control the border width of elements:

.border-{value}

Sets the border-width property to the specified value for all sides of the element.

CSS equivalent: border-width: {value}px;

Example usage:

<div class="border border-2">
  <!-- Content with border width of 2px -->
</div>

---

.border-t-{value}

Sets the border-top-width property to the specified value, controlling the top border width of the element.

CSS equivalent: border-top-width: {value}px;

Example usage:

<div class="border border-t-4">
  <!-- Content with top border width of 4px -->
</div>

---

.border-b-{value}

Sets the border-bottom-width property to the specified value, controlling the bottom border width of the element.

CSS equivalent: border-bottom-width: {value}px;

Example usage:

<div class="border border-b-4">
  <!-- Content with bottom border width of 4px -->
</div>

---

.border-l-{value}

Sets the border-left-width property to the specified value, controlling the left border width of the element.

CSS equivalent: border-left-width: {value}px;

Example usage:

<div class="border border-l-4">
  <!-- Content with left border width of 4px -->
</div>

---

.border-r-{value}

Sets the border-right-width property to the specified value, controlling the right border width of the element.

CSS equivalent: border-right-width: {value}px;

Example usage:

<div class="border border-r-4">
  <!-- Content with right border width of 4px -->
</div>

---

.border-x-{value}

Sets the border-left-width and border-right-width properties to the specified value, controlling the horizontal border width of the element.

CSS equivalent: border-left-width: {value}px; border-right-width: {value}px;

Example usage:

<div class="border border-x-2">
  <!-- Content with left and right border width of 2px -->
</div>

---

.border-y-{value}

Sets the border-top-width and border-bottom-width properties to the specified value, controlling the vertical border width of the element.

CSS equivalent: border-top-width: {value}px; border-bottom-width: {value}px;

Example usage:

<div class="border border-y-2">
  <!-- Content with top and bottom border width of 2px -->
</div>

---

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