When should I use an outline instead of a border in CSS?

Think about whether you’re styling the control’s regular edge or adding a separate mark around it. A border can serve as the control’s regular visual edge. An outline is drawn outside the border and takes up no layout space, so it does not shift surrounding content. [S1]

A quick comparison:

Border: Use it for the edge that belongs to the control’s ordinary appearance.

Outline: Use it for a separate mark outside that edge, especially when you don’t want the mark to shift nearby content. [S1]

These are choices about presentation, not a rule that one property is always better. You can use a border for the resting appearance and an outline for a separate emphasis state.

A visible outline can mark a focused control without taking up layout space, so surrounding content does not shift just because the focus mark appears. That makes it a useful option for focus styling. [S1]

For example, this CSS adds an outline when a button receives focus:

button:focus {
  outline: 3px solid #185abc;
  outline-offset: 3px;
}

The color and width are illustrative choices, not universal requirements. outline-offset adjusts the outline’s distance from the border. [S1] Check the focus cue against your page’s actual controls and backgrounds; this example alone does not establish that a particular color or thickness is sufficiently visible in every design.

Do not remove it without providing another visible focus indicator. Setting outline: 0 or outline: none removes the browser’s default focus style; interactive elements still need a visible indicator. [S1]

If you want a different look, replace the default with an intentional style rather than leaving the focused control without a cue. For example, adapt the earlier rule to your design and check that the focused control remains easy to distinguish. There is no universally suitable color, thickness, or design specified here for every page.

Use this short decision process:

1. Decide whether the edge is part of the control’s regular appearance. If so, use a border for that edge.
2. Decide whether you also need a separate mark outside the edge. If so, consider an outline.
3. If that mark should not shift nearby content, an outline fits: it takes up no layout space. [S1]
4. For keyboard focus, keep a visible indicator. If replacing the browser’s default, add an alternative rather than simply removing it. [S1]
5. Adjust the gap with outline-offset if the ring is too close to or far from the border. [S1]

Worked example: a form field could have its ordinary border at rest and a distinct outline when focused. The exact styling is a design choice; check the result in the context of your page.