Press the Tab key while browsing any well-built site: an outline, often blue, moves from one interactive element to the next. That outline is outline, the most misunderstood property of the box model, often removed for purely cosmetic reasons without anyone stopping to think about what it protects.
outline looks like border at first glance, with an almost identical syntax, but its behaviour differs on a few specific points that each carry real practical weight.
Definition
outline draws a line around an element, like border, but never becomes part of the Box model: it takes up no space, pushes no neighbouring element, and can be drawn over surrounding content without shifting anything at all.
button:focus-visible {
outline: 3px solid #2563eb;
}This rule shows a three-pixel blue outline only when the button receives focus through a means that justifies it, typically keyboard navigation, never a plain mouse click.
outline versus border: what actually differs
border | outline | |
|---|---|---|
| Takes up space in the box | Yes | No |
| Can be set per side | Yes | No, always all four sides together |
| Can be offset outward | No | Yes, with outline-offset |
Follows border-radius precisely | Yes | Varies by browser |
The lack of per-side control is often forgotten: there is no way to draw an outline on the left only, unlike border-left. When a partial outline is needed, border or box-shadow remain the only real options.
outline-offset: pushing the outline away from the box
outline-offset adds space between the edge of an element and its outline, positive to push it outward, negative to pull it back inside, over the element itself.
a:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 4px;
}Those four pixels of offset keep the outline from touching a link's text directly, a small detail that makes focus noticeably more legible without changing the line's colour or thickness.
The outline: none trap
Removing the focus outline without replacing it with something else strips away the only visual signal a keyboard user has for knowing where they are on the page. Without it, there is no way to guess which link or button will react to the Enter key.
outline: none was used for years to remove the browser's default blue outline, seen as unattractive, without ever replacing it. It is one of the web's most common accessibility regressions, still present on recent sites. The right approach is to style the outline with its own colours instead of removing it, and to rely on :focus-visible so it only shows up during keyboard navigation.
What to do when the default style does not fit
Nothing stops a full customisation of the focus outline's look, as long as a visible signal stays present. outline-color, outline-width and outline-offset are enough to match it to a brand's visual style.
On an element already rounded with border-radius, where outline follows corners imperfectly depending on the browser, box-shadow makes a reliable alternative: a shadow with no blur and no offset, using a positive spread, mimics an outline that hugs the element's rounded shape exactly.
Frequently asked questions
Can outline be rounded like border-radius?
Recent browsers increasingly take it into account, but the behaviour still varies between rendering engines. For an outline guaranteed to hug rounded corners, box-shadow remains the more reliable option.
Why does the focus outline only appear with the keyboard and not the mouse?
Thanks to the :focus-visible pseudo-class, which only shows the outline when focus comes from an interaction that genuinely justifies it, such as the Tab key, unlike :focus, which shows it systematically, including after a plain mouse click.
Does outline take up space like border?
No, never: unlike border, outline is not part of the box model and therefore pushes no neighbouring element, even with a large thickness or a sizeable outline-offset.