В чём разница между border и outline в CSS?

Question

Accepted Answer

## Разница
**Border** — часть бокса (влияет на размеры при `content-box`, участвует в layout). **Outline** — обводка «снаружи» для фокуса/подсветки, **не занимает место** в потоке.

## Нюансы

```css
.box {
  border: 2px solid #333;
  outline: 2px solid deepskyblue;
  outline-offset: 4px;
}
```

- `border-radius` скругляет border; outline исторически мог оставаться прямоугольным (в современных браузерах часто следует форме).
- Outline не ломает layout при появлении focus-ring — поэтому его любят для a11y.
- У outline нет сторон `outline-left` как у border (есть единый контур).

## Итог
Border — рамка в модели коробки; outline — визуальный контур без влияния на размеры. Для `:focus-visible` чаще outline/`box-shadow`.