Outlines
The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.
Overview
The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 1.2 | 18 | 1 | |
transparent | 1 | 12 | 1 | 1.2 | 18 | 1 |
| Other | ||||||
| The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element. | 1 | 15 | 1.5 | 1.2 | 18 | 1 |
| The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border. | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
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 |
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 |
| Other | ||||||
| The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border. | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1.2 | 18 | 1 |
thick | 1 | 12 | 1 | 1.2 | 18 | 1 |
thin | 1 | 12 | 1 | 1.2 | 18 | 1 |
- This feature was removed in a later browser version (3.6)
- Available with a vendor prefix: -moz- (1)
- Before Firefox 88, an outline does not follow the shape of `border-radius`.
- Before Firefox 88, an outline does not follow the shape of `border-radius`.
- This feature was removed in a later browser version (3.6)
- Available with a vendor prefix: -moz- (1)
- Before Firefox 88, an outline does not follow the shape of `border-radius`.
- This feature was removed in a later browser version (3.6)
- Available with a vendor prefix: -moz- (1)
Syntax
:focus-visible {
outline: 2px solid #2196f3;
outline-offset: 2px;
}
.debug * {
outline: 1px solid red;
}Live demo
Use cases
Using Outlines
The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features