📪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-2">
  <!-- Content with outline width of 2 pixels -->
</div>

---

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

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

Example usage:

<div class="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-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-dotted Sets the outline-style property to dotted.

CSS equivalent: outline-style: dotted;

Example usage:

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

.outline-dashed Sets the outline-style property to dashed.

CSS equivalent: outline-style: dashed;

Example usage:

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

.outline-double Sets the outline-style property to double.

CSS equivalent: outline-style: double;

Example usage:

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

.outline-solid Sets the outline-style property to solid.

CSS equivalent: outline-style: solid;

Example usage:

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

.outline-inset Sets the outline-style property to inset.

CSS equivalent: outline-style: inset;

Example usage:

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

.outline-outset Sets the outline-style property to outset.

CSS equivalent: outline-style: outset;

Example usage:

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

.outline-ridge Sets the outline-style property to ridge.

CSS equivalent: outline-style: ridge;

Example usage:

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

.outline-groove Sets the outline-style property to groove.

CSS equivalent: outline-style: groove;

Example usage:

<div class="outline-groove">
  <!-- Content with groove outline style -->
</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.