The CSS outline property draws a line around an element, similar to border, but it does NOT take up layout space. It's commonly used for focus indicators, layout debugging, and visual emphasis.
Outline vs Border:
β’ Outline does not affect layout β it won't change element size or shift surrounding elements
β’ Outline does not follow border-radius (always rectangular)
β’ Outline supports negative offset values (draws inside the element)
β’ Outline is uniform on all sides β you can't set per-side values
β’ Outline is commonly used with :focus-visible for custom focus styles
Yes. Outline draws outside the border (or inside with negative offset). This is great for adding a focus ring on top of an existing border.
Use outline: none but always replace it with a custom focus style for accessibility: :focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
Yes. A negative offset draws the outline inside the element, which can create an inner border effect.