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

border takes up space in the block model of an element and affects its size. outline is drawn over the element, not taking up space and not affecting its size.

border can have different widths and styles for each of the four sides (border-top, border-right, border-bottom, border-left). outline is applied to the entire border of the element.

border can be rounded using border-radius. outline cannot be rounded.

outline is often used to indicate the focus of an element (:focus) to improve accessibility.