What is the CSS outline property and how does it differ from border?

Both outline and border draw a line around an element, but with important differences. Border is part of the box model — it takes up space and affects the element's layout. Outline is drawn outside the border and does not take up space — it does not affect the element's dimensions or surrounding layout. Outlines cannot have different widths per side (no outline-top) and cannot have rounded corners (though outline-offset can space it away). The most important use of outline is for keyboard focus indicators: browsers add an outline to focused elements by default for accessibility. Never use outline: none without providing an alternative focus style, as it harms keyboard navigation accessibility.