Как сделать горизонтальную линию в HTML и CSS

Горизонтальный разделитель можно сделать несколькими способами, но выбор зависит от смысла. Тег <hr> в современном HTML обозначает тематический переход между фрагментами контента, а чисто декоративную линию чаще удобнее рисовать средствами CSS — например, через border-top или псевдоэлемент.

Старые атрибуты align, color, noshade, size и width для hr относятся к устаревшему презентационному подходу. Внешний вид разделителя сегодня задают CSS.

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

<hr> уместен, когда в тексте происходит смысловой или тематический переход: например, между двумя частями длинного материала. Это не просто «полоска для красоты», хотя браузер по умолчанию обычно отображает элемент именно как горизонтальную линию.

Наглядный пример. Между двумя абзацами ниже находится настоящий элемент <hr>. Следом показан декоративный CSS-разделитель, чтобы разница была видна непосредственно в статье.

Для тематического перехода используйте семантический hr; для чистого декора чаще достаточно border-top или псевдоэлемента.

<p>Первая смысловая часть текста.</p>

<hr>

<p>Следующая часть с другой темой.</p>

Элемент hr является void-элементом: ему не нужен отдельный закрывающий тег. Запись <hr /> допустима как стиль синтаксиса, но завершающий слэш в HTML не требуется.

Как оформить hr через CSS

Чтобы получить аккуратный разделитель, проще сбросить стандартную рамку браузера и задать нужную верхнюю границу.

hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 2rem 0;
}

Толщина, стиль и цвет меняются так же, как у обычного border. Для короткой декоративной линии можно ограничить ширину и выровнять элемент:

hr.short {
  width: 6rem;
  border-top: 3px solid #208754;
  margin: 2rem auto;
}

Если разделитель используется в разных местах сайта, лучше создать класс, чем повторять inline-стили в каждом материале.

Декоративная линия через border

Если никакого тематического перехода нет и линия нужна только как часть оформления блока, семантически чище добавить границу существующему элементу.

.section-title {
  padding-bottom: .5rem;
  border-bottom: 2px solid #208754;
}

Такой вариант особенно удобен для заголовков, карточек, блоков меню или виджетов. Дополнительный HTML-элемент ради одной полосы в этом случае не нужен.

Линия с текстом посередине.

Иногда нужно визуально разделить части страницы подписью вроде «или», «далее» или названием блока. Для этого можно использовать контейнер и псевдоэлементы.

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: #d9d9d9;
  flex: 1;
}

<p class="divider">или</p>

Здесь сама подпись остаётся обычным текстом, а линии создаются CSS. Если разделитель несёт только декоративную функцию, такой вариант обычно логичнее, чем несколько hr.

Почему старые атрибуты hr лучше не использовать

В старых HTML-уроках часто встречается разметка вроде <hr color="red" width="50%" size="5">. Современная практика разделяет содержание и оформление: HTML сообщает о тематическом разрыве, CSS определяет цвет, ширину и толщину.

Преимущества такого подхода заметны при поддержке сайта:

• дизайн всех разделителей меняется в одном CSS-файле;
• разметка остаётся короче и понятнее;
• не приходится поддерживать устаревшие презентационные атрибуты;
• проще адаптировать оформление под мобильные устройства и тёмную тему;
• можно использовать CSS-переменные из общей дизайн-системы сайта.

Если в старом материале такие атрибуты уже работают, браузер может продолжать их отображать, но при новом коде лучше сразу использовать CSS.

Отступы, ширина и адаптивность.

Разделитель не должен прилипать к соседним абзацам. Обычно вертикальные отступы задаются через margin, а ширина — относительными единицами или максимальной шириной контейнера.

.content-divider {
  width: min(100%, 40rem);
  margin: 2rem auto;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .25;
}

currentColor берёт текущий цвет текста, поэтому линия легче адаптируется к разным темам. Но слишком низкий контраст может сделать разделитель практически невидимым — оформление стоит проверять на реальном фоне сайта.

Типичные ошибки

При работе с горизонтальными линиями чаще всего встречаются не технические, а структурные проблемы. Стоит избегать следующих ситуаций:

• hr вставляется после каждого абзаца только ради декора;
• одновременно используются HTML-атрибуты и конфликтующие CSS-правила;
• для линии создаётся пустой div, хотя достаточно border существующего элемента;
• фиксированная ширина в пикселях выходит за пределы мобильного экрана;
• толстые и яркие разделители конкурируют с заголовками и основным содержанием.

Хороший разделитель помогает увидеть структуру, а не становится самостоятельным визуальным объектом.

Итог

Используйте <hr>, когда нужен именно тематический переход между частями контента. Для чисто декоративной полосы чаще подходит CSS border или псевдоэлемент. Цвет, толщину, ширину и отступы в обоих случаях лучше задавать через CSS, а не устаревшими HTML-атрибутами.

Если нужна рамка вокруг целого блока, см. отдельную инструкцию «Как сделать рамку вокруг текста в HTML и CSS».