outline
An outline around the element that takes no space and does not shift neighbors.
Syntax
outline: width style color;Values
| Parameter | Type | Description |
|---|---|---|
| width | length | The thickness. |
| style | keyword | The style, as for `border`: `solid`, `dashed`… |
| color | color | The color. |
| outline-offset | length | A separate property: the gap between the element and the outline. |
Examples
A visible focus outline with an offset:
<style>
a:focus-visible, button:focus-visible {
outline: 3px solid darkorange;
outline-offset: 3px;
}
</style>
<p>Press Tab to move between these:</p>
<a href="#">A link</a> <button>A button</button>Notes
The browser draws an outline around focused elements by default. outline: none without a replacement makes the site unusable from the keyboard. Unlike a border, the outline does not change the size of the element.
See also
- border — A border around the element: width, style and color in one property.
- :focus-visible — Matches a focused element when the browser decides the focus should be visible — usually after keyboard navigation.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.