outline-style
Sets the outline line style of an element. Unlike border, outline does not take up layout space and is primarily used for focus indicators or debugging.
Class List
| Class | CSS | Description |
|---|---|---|
olss | outline-style: solid | solid outline |
olsd | outline-style: dashed | dashed outline |
olsdt | outline-style: dotted | dotted outline |
olsdb | outline-style: double | double outline |
olsg | outline-style: groove | groove effect outline |
olsr | outline-style: ridge | ridge effect outline |
olsi | outline-style: inset | inset effect outline |
olso | outline-style: outset | outset effect outline |
olsn | outline-style: none | remove outline |
Visual Comparison
Visually compares each outline-style value. outline-width and outline-color must also be set to be visible.
solid — olss
solid
dashed — olsd
dashed
dotted — olsdt
dotted
double — olsdb
double
groove — olsg
groove
ridge — olsr
ridge
inset — olsi
inset
outset — olso
outset
Usage Examples
<!-- Solid outline on focus -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px" placeholder="Focus here" />
<!-- Dashed outline emphasis -->
<div class="olsd ow2px p2rem cFAFAFA">
Dashed outline area
</div>
<!-- Remove outline (alternative style required) -->
<button class="olsn py8px px16px br8px bg6366F1 cFFFFFF bn cp focus-olss focus-ow2px">
Custom focus
</button>outline vs border
| outline | border | |
|---|---|---|
| space occupied | Does not take up space | Takes up space (affects element size) |
| border-radius applied | Varies by browser | Always applied |
| per-direction setting | Not possible (all sides only) | top/right/bottom/left Can be set individually |
| primary use cases | Focus indicator, debugging | Design borders, dividers |
Tips & Notes
Accessibility and focus
Outline is important for keyboard focus indicators. When removing it with olsn (outline-style: none), always provide an alternative focus style.
No layout impact
Unlike border, outline does not affect element size or layout. Useful for providing visual feedback on focus without layout shifts.