Чем `outline` отличается от `border` для focus-стилей?

Question

Accepted Answer

## Почему outline для :focus

- **`border`** занимает место в box model (или влияет при `box-sizing`), сдвигает layout при появлении.
- **`outline`** по умолчанию рисуется **снаружи**, не влияет на размеры (хотя `outline-offset` есть).

Для focus-ring часто:

```css
:focus-visible {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}
```

Можно стилизовать через `box-shadow`, имитируя кольцо без сдвига. Главное — **не снимать** focus-индикатор через `outline: none` без замены. `border` на `:focus` хуже тем, что «прыгает» вёрстка и сложнее совместить с уже существующей рамкой компонента.