📪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.
Last updated