Outline в CSS
Вы уже умеете рисовать border. Outline — родственный инструмент с другой задачей: он рисует кольцо снаружи border-box и — в отличие от border — не занимает место в раскладке. Соседи не сдвигаются, когда вы добавляете outline.
Outline против border
Держите эти два инструмента раздельно на ментальной карте.
📊 Outline vs border
| Признак | Outline | Border |
|---|---|---|
| Место в раскладке | Не занимает места; размер бокса не меняется | Занимает место; может увеличить border-box |
| Обычное место | Снаружи края border | Вокруг padding |
| Частое применение | Кольца фокуса, временный акцент | Постоянные края UI и рамки карточек |
| В расчёте размера блочной модели | Нет | Да (с content-box по умолчанию) |
Простой outline
Стиль, толщина и цвет работают почти как у border — но кольцо сидит снаружи.
Базовый outline
css.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}Сокращение outline
Знакомая тройка: толщина, стиль и цвет. Стиль нужен, чтобы outline был виден — одного outline: 2px #000 мало.
Сокращение outline
css.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}Частые стили outline
Solid, dashed и dotted — повседневный выбор. outline: none убирает кольцо — осторожно (см. фокус ниже).
Примеры стилей outline
css.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }outline-offset — отодвинуть кольцо
outline-offset сдвигает outline от края border, не меняя размер раскладки. Положительные значения толкают наружу; отрицательные — внутрь.
Outline с offset
css.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Похожий вид, разная цена раскладки
Два бокса могут выглядеть похоже, но только border меняет, сколько места занимает элемент.
Border растёт; outline — нет
css.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}
.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Оба выглядят жирно; .with-border занимает больше ширины в раскладке */Привычка, дружелюбная к фокусу
Браузеры часто используют outline (или похожее кольцо) для клавиатурного фокуса. Не ставьте outline: none на всё. Если переоформляете фокус, дайте понятное кольцо-замену, чтобы пользователи клавиатуры видели, где они.
Оставьте видимое кольцо фокуса
css.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}Попробуйте сами
- Дайте боксу с padding
borderи более толстыйoutline— соседи остаются на месте. - Переключайте стиль outline между
solid,dashedиdotted. - Добавьте
outline-offset: 8pxи смотрите, как кольцо уходит наружу. - Сравните
.with-borderи.with-outlineрядом — похожая визуальная сила, разная ширина раскладки. - Стилизуйте
:focus-visibleна кнопке вместо глобального снятия outline.
Частые ошибки
- Считать outline как border при расчёте ширины раскладки (outline не добавляет размер)
- Ставить
outline: noneна все элементы без замены фокуса - Ждать, что outline отодвинет соседей (это работа margin или border)
- Писать толщину и цвет без стиля (
solid/dashed/ …) - Путать outline со слоями блочной модели, которые вы только что учили
Кратко
- Outline рисуется снаружи border и не занимает место в раскладке
- Сокращение: толщина, стиль, цвет — стиль обязателен
outline-offsetдвигает кольцо, не меняя размер бокса- Border — для постоянных краёв; outline — для фокуса и временных колец
- Держите видимый outline фокуса (или равноценную замену) для клавиатуры
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху