outline
outline draws a line around an element without affecting layout. It is especially important for focus indicators and high-visibility interaction states.
Overview
outline draws a line around an element without affecting layout. It is especially important for focus indicators and high-visibility interaction states.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 94 | 94 | 88 | 16.4 | 94 | 16.4 | |
dashed | 1 | 12 | 1 | 1.2 | 18 | 1 |
dotted | 1 | 12 | 1 | 1.2 | 18 | 1 |
double | 1 | 12 | 1 | 1.2 | 18 | 1 |
groove | 1 | 12 | 1 | 1.2 | 18 | 1 |
inset | 1 | 12 | 1 | 1.2 | 18 | 1 |
medium | 1 | 12 | 1 | 1.2 | 18 | 1 |
none | 1 | 12 | 1 | 1.2 | 18 | 1 |
outset | 1 | 12 | 1 | 1.2 | 18 | 1 |
ridge | 1 | 12 | 1 | 1.2 | 18 | 1 |
solid | 1 | 12 | 1 | 1.2 | 18 | 1 |
thick | 1 | 12 | 1 | 1.2 | 18 | 1 |
thin | 1 | 12 | 1 | 1.2 | 18 | 1 |
transparent | 1 | 12 | 1 | 1.2 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (94)
Implementation note
- Before Chrome 94, `outline` does not follow the shape of `border-radius`.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (94)
Implementation note
- Before Edge 94, `outline` does not follow the shape of `border-radius`.
Notes 5 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (88)
- This feature was removed in a later browser version (3.6)
Implementation note
- Before Firefox 88, `outline` does not follow the shape of `border-radius`.
Compatibility
- Available with a vendor prefix: -moz- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (16.4)
Implementation note
- Before Safari 16.4, `outline` does not follow the shape of `border-radius`. See bug 20807.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (94)
Implementation note
- Before Chrome Android 94, `outline` does not follow the shape of `border-radius`.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (16.4)
Implementation note
- Before Safari on iOS 16.4, `outline` does not follow the shape of `border-radius`. See bug 20807.
Syntax
CSS
/* Display only when the keyboard is in focus */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
/* Hide the focus ring when the mouse is clicked */
:focus:not(:focus-visible) {
outline: none;
}
/* Custom focus ring */
.button:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 3px;
border-radius: 4px;
}Live demo
Use cases
Focus indicators
Use outline to create clear keyboard focus styles that remain visible across components.
Validation emphasis
Highlight invalid or active controls without resizing neighboring content.
Cautions
- Removing outlines without a replacement is a common accessibility failure.
- Thin or low-contrast outlines may technically exist but still be hard to perceive.
Accessibility
- Focus outlines should be visible, consistent, and strong enough to track keyboard movement confidently.
Related links
Powered by web-features