outline
Draws an outline around an element that doesn’t take up space in the layout.
- Initial value
medium none auto- Inherited
- No
- Animatable
- yes, width and color
- Applies to
- all elements
- JavaScript
element.style.outline = "2px solid #a78bfa"
Example
#.button:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px;
}<style>.button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }</style>
<p>Click the preview and press Tab:</p>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Save</button>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Cancel</button>Definition and usage
#The outline property is shorthand for outline-width, outline-style, and outline-color. An outline looks similar to a border, but it’s drawn outside the element and doesn’t affect its size or position.
Browsers use it to show keyboard focus. That’s how people navigating with Tab can see where they are. Removing it with no replacement (outline: none) is one of the most common accessibility mistakes.
You can push the outline away from the element with outline-offset. Modern browsers also draw the outline following the element’s border-radius.
Syntax
#outline: <width> || <style> || <color>;Values
#- No outline.
- A purple outline right at the element’s edge.
with an offset
An outline pushed 4px away from the edge.- A dashed outline.
Values in practice
#none
.demo { outline: none; }2px solid #a78bfa
.demo { outline: 2px solid #a78bfa; }+ outline-offset
.demo { outline: 2px solid #a78bfa; outline-offset: 4px; }3px dashed #f59e0b
.demo { outline: 3px dashed #f59e0b; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Instead of removing the outline, use
:focus-visible. It only appears for keyboard navigation, not after a mouse click. - An outline doesn’t change the layout, so it’s great for highlighting elements while debugging.
Related entries
#- border vs outlineborder is part of the box model and enlarges the element, while outline draws a ring outside it, with no effect on the page layout or size.
- borderShorthand that sets the width, style, and color of a border.
- border-radiusRounds the corners of an element.
- outline-offsetPushes the outline away from the element’s edge, or pulls it inward, without changing the page layout.
Spotted a mistake or missing an example? Write to us.