outline and border: the difference in box size

In a few sentences

In brief

The contour can highlight an element without changing the arrangement.

Useful to know

outline draws an outline outside the frame and takes no space in the layout . border participates in the dimensions of the box according to the selected box-sizing. This makes outline convenient for a visible focus state without dislocation of neighbors. [1]

Example: button:focus { outline: 3px solid navy; outline-offset: 3px; }. Distance separates the contour from the button. Do not remove the standard focus just for the sake of appearance, without a visible substitute. Also check that a container with a cut does not hide part of the outline.

Sources

For further detail and to check the information:

[1] MDN — outline ↗