outline-width
Sets the outline thickness of an element. outline-style must be set for the thickness to be visible. Unlike border, it does not take up layout space.
Class List
Pattern-based classes. Use the ow{N}px format combining a number with a unit.
| Class | CSS | Description |
|---|---|---|
ow1px | outline-width: 1px | outline thickness 1px |
ow2px | outline-width: 2px | outline thickness 2px |
ow3px | outline-width: 3px | outline thickness 3px |
ow4px | outline-width: 4px | outline thickness 4px |
Visual Comparison
Visually compares various outline-width values.
1px — ow1px
1px
2px — ow2px
2px
3px — ow3px
3px
4px — ow4px
4px
Usage Examples
<!-- Outline thickness on focus -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px" placeholder="Focus here" />
<!-- Various outline thicknesses -->
<div class="df gap4rem fww">
<div class="olss ow1px p2rem cFAFAFA">1px</div>
<div class="olss ow2px p2rem cFAFAFA">2px</div>
<div class="olss ow3px p2rem cFAFAFA">3px</div>
</div>
<!-- Combined with outline-offset -->
<div class="olss ow2px oo4px p2rem cFAFAFA">
Gap between outline and element
</div>Tips & Notes
outline-style required
Using ow{N}px alone makes the outline invisible. Use it together with olss (outline-style: solid) etc.
Combining with focus state
Combine with pseudo-classes like focus-ow2px to apply outline thickness only on focus.