outline never affects box sizing - it paints a ring entirely outside the border edge, offset by outline-offset, and can visually overlap surrounding content without shifting it.
solid outline: 8px solid #4a90d9 | dashed outline: 8px dashed #4a90d9 | dotted outline: 8px dotted #4a90d9 | double outline: 8px double #4a90d9 |
groove outline: 8px groove #4a90d9 | ridge outline: 8px ridge #4a90d9 | inset outline: 8px inset #4a90d9 | outset outline: 8px outset #4a90d9 |
auto (renders as solid) outline: 8px auto #4a90d9 |
A negative offset pulls the outline back over the border and padding; a positive offset pushes it further away.
outline-offset: -10px outline: 6px solid #d94a4a; outline-offset: -10px | outline-offset: 0 (default) outline: 6px solid #d94a4a; border: 3px solid #333 | outline-offset: 10px outline: 6px solid #d94a4a; outline-offset: 10px |
invert performs a true per-pixel color inversion of whatever is underneath the outline (via a PDF blend mode), not an approximation - it reads correctly over any background.
over a red background outline: 10px solid invert; outline-offset: -14px | over a green background outline: 10px solid invert; outline-offset: -14px | over a gradient outline: 10px solid invert; outline-offset: -14px |
This box's outline is wider than its own padding, so it visually overlaps its siblings - but every box below sits exactly where it would if the outline were removed.