The CSS outline property
The CSS outline property draws a line around an element, just outside its border. Unlike a border it takes up no space, so it never shifts the layout. Its most important job is the keyboard focus indicator — which is why you should never remove it without providing a clear replacement.
Overview
outline looks a lot like border — it is a shorthand for a width, style and color — but with two key differences. It is drawn outside the border, and it does not take up any space in the layout, so adding or removing one never nudges anything. It can also follow a non-rectangular shape and ignores border-radius in older browsers (modern ones follow the curve).
Its headline role is the focus ring: the outline a browser draws around whatever element has keyboard focus, so people navigating by Tab can see where they are. This is not decorative — it is essential for keyboard and low-vision users — and the single most damaging line in CSS is outline: none applied to focusable elements with nothing put back in its place.
The modern way to style focus thoughtfully is the :focus-visible pseudo-class, which shows a ring for keyboard users but not for mouse clicks, plus outline-offset to push the ring a few pixels away from the element for a cleaner look. Style the focus ring, by all means — just never delete it.
Syntax
/* a visible, offset focus ring */
:focus-visible {
outline: 2px solid #1c7ce9;
outline-offset: 2px;
}Values
The outline property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
width |
The line thickness, e.g. 2px, or thin / medium / thick. |
style |
The line style: solid, dashed, dotted and others. Required, like border. |
color |
The line color. Defaults to the text color or the system accent. |
auto |
Lets the browser draw its default focus ring — the safest choice for focus. |
Example
<style>
.btn { font: 600 15px system-ui, sans-serif; padding: 12px 22px; border: 0; border-radius: 8px; background: #1c7ce9; color: #fff; cursor: pointer; }
.btn:focus-visible { outline: 3px solid #6d28d9; outline-offset: 3px; }
</style>
<p style="font:14px system-ui,sans-serif;color:#64748b;margin:0 0 10px;">Press Tab to focus the button and see the outline.</p>
<button class="btn">Focus me</button>Best practices
- Never use
outline: noneon focusable elements without providing an equally clear focus style in its place. - Style focus with
:focus-visibleso the ring shows for keyboard users without appearing on every mouse click. - Use
outline-offsetto give the ring a little breathing room around the element for a cleaner look. - Prefer
outlineover border for focus rings because it does not shift the layout when it appears.
Accessibility
The focus outline is a core accessibility feature, not a style choice. WCAG requires a visible focus indicator on every interactive element, because keyboard, switch and low-vision users rely on it to know where they are on the page. Removing it — the infamous *:focus { outline: none } — leaves those users navigating blind.
If the default ring clashes with your design, restyle it rather than remove it: a custom outline (or a box-shadow ring) with strong contrast against the background works well. Use :focus-visible so the indicator appears for keyboard navigation without showing on ordinary mouse clicks, giving you the clean look without breaking access.
Frequently asked questions
What is the difference between outline and border?
outline sits outside the border and takes up no space, so it never shifts the layout. A border is part of the box and adds to its size.Should I remove the outline on focus?
:focus-visible, rather than removing it.How do I style the focus ring in CSS?
:focus-visible and set a custom outline with good contrast, plus outline-offset for spacing. This shows the ring to keyboard users without flashing it on every click.