CSS outline Test Page

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.

outline-style keywords

Translucent patterned corners

Corner dots and dashes have the same opacity as the straight runs, including on a wrapped inline outline.

border-radius following

asymmetric border-radius following

The red border has exactly one rounded corner. The blue outline should follow that corner while its other three corners remain square.

wrapped inline outline

An outline on an inline element that wraps across lines is drawn as one connected shape around all of them, matching Chromium: each line's rectangle is expanded by outline-offset, the rectangles are unioned, and the outline traces the boundary of the region they cover - running around its concave corners rather than closing across each wrap. Whether the lines merge into one piece depends only on whether those expanded rectangles touch; a border is not a special case, it just makes each line's box taller, and line spacing or outline-offset each cause the overlap on their own. Border itself keeps the sliced geometry either way, staying open at internal line breaks as box-decoration-break's slice value (which does not govern outline at all) requires. Every outline style follows the merged shape: a dash pattern is fitted along each of its edges, and a bevel takes each edge's light or dark face from the direction that edge runs in - the rule that still works once the lines have merged and a per-side one no longer does.

The patterned and bevelled styles follow that same merged shape rather than restarting at each line: the dashes turn the step between two lines, and the bevel keeps one light source across the whole shape instead of relighting every line.

border + outline together

The red border occupies the box edge; the blue outline is a separate ring outside it. Rounded samples show both contours following the same border-radius.

outline-offset

A negative offset pulls the outline back over the border and padding; a positive offset pushes it further away.

outline-color: invert

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.

Replaced elements

An image, inline SVG, object, MathML formula or form control takes an outline like any other box: a ring around its border box, painted after its own background and content.

Layout-neutral: outline never shifts surrounding content

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.