📪Border style

Border Style Classes

The following classes control the border style of elements:

.border-dashed Sets the border-style property to dashed, creating a dashed line border.

CSS equivalent: border-style: dashed;

Example usage:

<div class="border-dashed">
  <!-- Content with dashed border style -->
</div>

---

.border-dotted Sets the border-style property to dotted, creating a dotted line border.

CSS equivalent: border-style: dotted;

Example usage:

<div class="border-dotted">
  <!-- Content with dotted border style -->
</div>

---

.border-double Sets the border-style property to double, creating a double line border.

CSS equivalent: border-style: double;

Example usage:

<div class="border-double">
  <!-- Content with double border style -->
</div>

---

.border-none Sets the border-style property to none, removing the border.

CSS equivalent: border-style: none;

Example usage:

<div class="border-none">
  <!-- Content without border -->
</div>

---

.border-solid Sets the border-style property to solid, creating a solid line border.

CSS equivalent: border-style: solid;

Example usage:

<div class="border-solid">
  <!-- Content with solid border style -->
</div>

---

.border-inset Sets the border-style property to inset, creating an inset border.

CSS equivalent: border-style: inset;

Example usage:

<div class="border-inset">
  <!-- Content with inset border style -->
</div>

---

.border-outset Sets the border-style property to outset, creating an outset border.

CSS equivalent: border-style: outset;

Example usage:

<div class="border-outset">
  <!-- Content with outset border style -->
</div>

---

.border-hidden Sets the border-style property to hidden, hiding the border.

CSS equivalent: border-style: hidden;

Example usage:

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

---

.border-ridge Sets the border-style property to ridge, creating a ridge border.

CSS equivalent: border-style: ridge;

Example usage:

<div class="border-ridge">
  <!-- Content with ridge border style -->
</div>

---

.border-groove Sets the border-style property to groove, creating a groove border.

CSS equivalent: border-style: groove;

Example usage:

<div class="border-groove">
  <!-- Content with groove border style -->
</div>

These utility classes allow you to easily control the border style of elements, providing various options to achieve the desired visual effect for your borders.