outline
Sets the outline of an element. Unlike border, it does not affect layout and is primarily used as a focus indicator.
Class List
| Class | CSS | Description |
|---|---|---|
oln | outline: none | fully removes outline; used to remove focus indicator |
olss | outline-style: solid | solid outline; primarily used for custom focus styles |
olsd | outline-style: dashed | dashed outline; for drag/drop area indicators |
olsdt | outline-style: dotted | dotted outline; auxiliary visual hint |
olsdb | outline-style: double | double outline; strong emphasis |
olsg | outline-style: groove | groove 3D effect |
olsr | outline-style: ridge | ridge 3D effect |
olsi | outline-style: inset | inset 3D effect |
olso | outline-style: outset | outset 3D effect |
olsn | outline-style: none | sets only outline-style to none |
Visual Comparison
Compares how each outline-style value affects an element.
solid — olss
dashed — olsd
dotted — olsdt
double — olsdb
groove — olsg
ridge — olsr
none — oln
inset — olsi
outline vs border — Layout Impact Comparison
outline does not affect layout, while border is included in the element's size.
outline (no layout impact)
Spacing between adjacent elements does not change even with outline
border (included in layout)
Element size increases by border thickness, affecting spacing
outline-width & outline-offset Patterns
Use ow{N}px for thickness and oo{N}px for the gap between the outline and the element.
| Pattern | CSS | Example |
|---|---|---|
| ow{N}px | outline-width: {N}px | ow2px |
| ow{N}rem | outline-width: {N}rem | ow0-3rem |
| oo{N}px | outline-offset: {N}px | oo4px |
| oo{N}rem | outline-offset: {N}rem | oo0-2rem |
| neg-oo{N}px | outline-offset: -{N}px | neg-oo4px |
Class Details
olnoutline: none
Completely removes the element's outline. Used to remove the browser's default focus indicator, but accessibility must always be considered.
<!-- Remove default focus outline + custom focus style -->
<button class="oln focus-visible-olss focus-visible-ow2px py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Accessible button
</button>
<!-- Caution: Using oln alone causes accessibility issues! -->
<input class="oln py8px px16px bg18181B cFFFFFF br4px b1pxsolid27272A" />Accessibility caution
Using oln makes it impossible for keyboard users to see the focus position. Always provide a custom focus style using the focus-visible- prefix.
olssoutline-style: solid
Applies a solid outline style. The most common outline style, primarily used for creating custom focus indicators.
<!-- Custom focus indicator -->
<button class="oln focus-visible-olss focus-visible-ow2px oo2px py8px px16px bg18181B cFFFFFF br8px bn cp">
Solid outline on focus
</button>
<!-- outline-width, outline-offset Combination -->
<div class="olss ow2px oo4px p2rem bg18181B br4px cFFFFFF">
solid outline + offset
</div>olsdoutline-style: dashed
Applies a dashed outline style. Used to visually distinguish drag areas, drop targets, etc.
<!-- Drop zone indicator -->
<div class="olsd ow2px p3-2rem bg18181B br8px df jcc aic cA1A1AA">
Drop files here
</div>olsdtoutline-style: dotted
Applies a dotted outline style. Used for auxiliary visual hints or debugging.
<!-- Helper hint area -->
<div class="olsdt ow2px p2rem bg18181B br4px cA1A1AA">
Dotted outline area
</div>olsdboutline-style: double
Applies a double outline style. Used for elements requiring emphasis; outline-width must be at least 3px for the double line to be visible.
<!-- Emphasis area (minimum 3px required) -->
<div class="olsdb ow4px p2rem bg18181B br4px cFFFFFF">
Double outline emphasis
</div>olsgolsrolsiolsogroove / ridge / inset / outset
3D effect outline styles. Rendering may vary across browsers and is rarely used in modern web development.
<!-- 3D style outline -->
<div class="olsg ow3px p2rem bg18181B cA1A1AA mb8px">groove</div>
<div class="olsr ow3px p2rem bg18181B cA1A1AA mb8px">ridge</div>
<div class="olsi ow3px p2rem bg18181B cA1A1AA mb8px">inset</div>
<div class="olso ow3px p2rem bg18181B cA1A1AA">outset</div>olsg | groove — carved-in 3D effect |
olsr | ridge — raised 3D effect (opposite of groove) |
olsi | inset — inward-pressed 3D effect |
olso | outset — outward-pushed 3D effect (opposite of inset) |
olsnoutline-style: none
Sets outline-style to none. Similar to oln but used when controlling outline-style individually.
<!-- Individual control of outline-style only -->
<div class="olsn p2rem bg18181B cA1A1AA">
outline-style: none
</div>Tips & Notes
Accessibility alternative required when using oln
Removing the default focus with oln makes it impossible for keyboard users to see their current position. Always provide custom styles with focus-visible-.
Outline has no layout impact
Unlike border, outline does not affect element size or position. This is advantageous for providing focus feedback without layout shifts.
Adjusting gap with outline-offset
Use oo{N}px to add a gap between the outline and the element. Negative values are also possible, drawing the outline inside the element.