Qual é a diferença entre as propriedades border e outline em CSS?

O border ocupa espaço no modelo de caixa de um elemento e afeta as suas dimensões. outline é desenhado sobre o elemento, sem ocupar espaço e sem afetar as suas dimensões.

O border pode ter diferentes larguras e estilos para cada um dos quatro lados (border-top, border-right, border-bottom, border-left). outline aplica-se a toda a borda do elemento na sua totalidade.

O border pode ser arredondado usando border-radius. outline não pode ser arredondado.

O outline é frequentemente usado para indicar o foco de um elemento (:focus) com o objetivo de melhorar a acessibilidade.