CSS: outline vs border — в чём разница и когда что использовать

В CSS есть два похожих на первый взгляд способа обвести элемент: border и outline. Они дают видимую рамку, но работают по-разному. Разберём, чем они отличаются, как ведут себя в макете и в каких случаях лучше применять каждый из них.

Главное отличие: влияет ли рамка на поток документа

Это самый важный момент.

• border входит в габариты элемента. Он участвует в расчёте ширины и высоты (в стандартной модели box-sizing: content-box). Если вы добавите border: 2px solid black, элемент станет визуально и геометрически шире на 4 пикселя (по 2 с каждой стороны).
• outline не занимает места. Он рисуется поверх содержимого и соседей, не сдвигая соседние элементы и не меняя размеры блока.

Из-за этого поведение при наведении и анимации у них разное.

Пример: как это влияет на макет

<div class="box-with-border">С border</div>
<div class="box-with-outline">С outline</div>

.box-with-border {
  width: 100px;
  height: 50px;
  background: #f0f0f0;
  border: 4px solid blue;
}
 
.box-with-outline {
  width: 100px;
  height: 50px;
  background: #f0f0f0;
  outline: 4px solid red;
}

Если поставить эти два блока рядом, то блок с border будет занимать больше места в потоке, а блок с outline — ровно 100×50 пикселей плюс рамка поверх.

Технические различия

Когда использовать border

border — это часть дизайна и структуры элемента. Его применяют, когда рамка должна быть учтена в размерах и компоновке.

Примеры:

1. Карточки, панели, контейнеры. Рамка — часть визуального блока.
   css

   .card {
     border: 1px solid #ddd;
     padding: 16px;
   }

2. Кнопки. Часто используют border вместе с border-radius.
   css

   .btn {
     border: 2px solid #3b8ed0;
     border-radius: 6px;
     background: white;
   }

3. Таблицы. Границы ячеек — это классический кейс для border.
   css

   table {
     border-collapse: collapse;
   }
   td, th {
     border: 1px solid #ccc;
   }

4. Декоративные разделители. Когда нужна чёткая линия, которая участвует в сетке.

Когда использовать outline

outline чаще всего нужен не как декоративный элемент, а как индикация состояния.

Основные случаи:

1. Фокус на интерактивных элементах. Это стандарт доступности (a11y): браузеры сами добавляют outline для элементов в фокусе (кнопки, ссылки, поля ввода).
   css

   button:focus, input:focus {
     outline: 2px solid #005fcc;
     outline-offset: 2px; /* отступ рамки от края элемента */
   }

   outline-offset — полезное свойство: оно отодвигает рамку от края, чтобы она не сливалась с границей самого элемента.

2. Визуальные подсказки без сдвига макета. Например, при наведении или в режиме редактирования.
   css

   .item:hover {
     outline: 2px dashed #ff8b00;
     outline-offset: 4px;
   }

   Поскольку outline не двигает соседей, такой эффект не «дёргает» верстку.

3. Выделение активной области. В галереях, гридах, таблицах иногда удобно подсвечивать текущий элемент outline, чтобы не менять размеры ячеек.
4. Отладка и инспекция. Разработчики часто временно добавляют outline к блокам, чтобы видеть границы, не ломая макет.

Частые ошибки и важные нюансы

• Не удаляйте outline у фокусируемых элементов без замены. Убирать outline: none у кнопок и полей ввода можно только если вы добавляете альтернативную визуальную индикацию (например, другой цвет рамки, тень, анимацию). Иначе пострадает доступность для пользователей клавиатуры.
  css

  button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #005fcc; /* заменяем outline тенью */
  }

• Нельзя сделать outline пунктирным или скруглённым. Если нужен пунктир — используйте border. Если нужно скругление — тоже border.
• Порядок отрисовки. outline рисуется поверх контента и поверх border, но под box-shadow (в большинстве браузеров). Это можно учитывать при создании сложных эффектов.
• Производительность. Оба свойства лёгкие; заметной разницы в производительности нет.

Практический пример: кнопка с фокусом и hover

<button class="btn-accessible">Кнопка</button>

.btn-accessible {
  border: 1px solid #ccc;
  background: white;
  padding: 8px 16px;
  cursor: pointer;
}
 
/* Hover: усиливаем border */
.btn-accessible:hover {
  border-color: #3b8ed0;
}
 
/* Focus: добавляем outline для доступности */
.btn-accessible:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Здесь border задаёт базовый стиль, а outline отвечает за фокус — и не ломает сетку, если кнопка находится в плотном ряду.

Пример: выделение активной карточки без сдвига

<div class="card active">Активная карточка</div>
<div class="card">Обычная карточка</div>

.card {
  width: 200px;
  padding: 12px;
  border: 1px solid #e0e0e0;
}
 
.card.active {
  /* Не меняем размеры, просто подсвечиваем */
  outline: 3px solid #ff8b00;
  outline-offset: 4px;
}

Если бы мы использовали border вместо outline, карточка стала бы шире и сдвинула бы соседние элементы — в сетке это нежелательно.