What is the difference between border and outline properties in CSS?

border — part of the box model of an element, occupies space and affects its size and position. It is used to draw a border around the content and the element's padding.

outline — drawn outside the element's box model, does not affect its size or position, and does not occupy space. It is often used for focus indication, accessibility, or debugging.

Comparison:

Property	Part of the box model	Affects size	Occupies space	Drawn	Purpose
border	Yes	Yes	Yes	Inside the box model	Element border
outline	No	No	No	Outside the box model	Indication, debugging