📪Outline

Outline Width and Offset Utility Classes

The following utility classes control the outline width and offset of elements:

.outline-{width}

Sets the outline-width property to a specific value in pixels.

CSS equivalent: outline-width: {width}px;

Example usage:

<div class="outline outline-2">
  <!-- Content with outline width of 2 pixels -->
</div>

---

.outline-offset-{number}

Sets the outline-offset property to a specific value in pixels.

CSS equivalent: outline-offset: {number}px;

Example usage:

<div class="outline outline-offset-4">
  <!-- Content with outline offset of 4 pixels -->
</div>

---

These utility classes allow you to easily control the outline width and offset of elements, providing flexibility in customizing the appearance of outlines for improved visual styling.

Outline Color Classes

The following utility classes control the outline color of elements:

.outline-{color}

Sets the outline-color property to a specific color value.

CSS equivalent: outline-color: {color};

Example usage:

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

---

These utility classes allow you to easily set the outline color of elements, providing a convenient way to customize the visual appearance of outlines for better design cohesion.

Outline Style Classes

The following classes control the style of outlines:

.outline

Sets the outline property to a default style of 1px solid.

CSS equivalent: outline: 1px solid;

Example usage:

<div class="outline">
  <!-- Content with default outline style -->
</div>

---

.outline-style-dotted

Sets the outline-style property to dotted.

CSS equivalent: outline-style: dotted;

Example usage:

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

---

.outline-style-dashed

Sets the outline-style property to dashed.

CSS equivalent: outline-style: dashed;

Example usage:

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

---

.outline-style-double

Sets the outline-style property to double.

CSS equivalent: outline-style: double;

Example usage:

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

---

.outline-style-solid

Sets the outline-style property to solid.

CSS equivalent: outline-style: solid;

Example usage:

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

---

.outline-style-inset

Sets the outline-style property to inset.

CSS equivalent: outline-style: inset;

Example usage:

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

---

.outline-style-outset

Sets the outline-style property to outset.

CSS equivalent: outline-style: outset;

Example usage:

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

---

.outline-style-ridge

Sets the outline-style property to ridge.

CSS equivalent: outline-style: ridge;

Example usage:

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

---

.outline-style-groove

Sets the outline-style property to groove.

CSS equivalent: outline-style: groove;

Example usage:

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

---

.outline-style-initial

Sets the outline-style property to initial.

CSS equivalent: outline-style: initial;

Example usage:

<div class="outline-style-initial">
  <!-- Content with initial outline style -->
</div>

---

.outline-style-inherit

Sets the outline-style property to inherit.

CSS equivalent: outline-style: inherit;

Example usage:

<div class="outline-style-inherit">
  <!-- Content with inherit outline style -->
</div>

---

.outline-none

Sets the outline property to none.

CSS equivalent: outline: none;

Example usage:

<div class="outline-none">
  <!-- Content with no outline -->
</div>

---

These utility classes allow you to easily apply different outline styles to elements, giving you flexibility in designing and customizing the appearance of outlines for visual emphasis and aesthetics.