outline
The outline CSS shorthand property sets most of the outline properties in a single declaration.
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.