The outline property draws a line around an element, outside the element's border edge, to visually emphasize or separate it from surrounding content. Unlike borders, outlines are not part of the CSS box model: they do not occupy layout space and therefore do not affect the element's size or cause reflow when added or removed. Because outlines are painted outside the box, they can overlap adjacent elements and are typically used for temporary or overlay-style highlighting rather than defining an element's structural appearance.

Visually and behaviorally, an outline differs from a border in several important ways. A border is part of the element's box and follows the box's shape and rounding, while an outline is independent of box sizing and can be rendered outside rounded corners or over neighboring content. For quick comparisons or replacements, developers sometimes choose a border for a permanent decorative edge and an outline for transient emphasis; see border for more about the border concept and how it participates in layout.

Outlines are commonly used for accessibility and interaction feedback, most notably as keyboard focus indicators that help users navigate pages without a pointing device. Because they do not change layout, outlines are ideal for focus rings that must appear and disappear without shifting nearby content. When you want to move an outline away from the element edge without affecting size, the outline-offset property is used to shift its position, while visual effects that simulate or extend an outline (such as soft glows or multiple layered strokes) are frequently implemented with box-shadow instead — box shadows offer blur and spread control and integrate differently with stacking and clipping.

Practical considerations: removing an outline entirely can harm keyboard users unless a clear, accessible alternative focus indicator is provided. Because outlines can overlap other elements, they may interact with overflow and stacking contexts in ways that differ from borders or shadows; plan their use accordingly when designing dense or interactive interfaces. For transient debugging (quickly spotting layout issues) and for emphasizing interactive states (hover, focus, active), outlines are a lightweight, non-disruptive tool that complements rather than replaces more permanent visual styles.