Исполняемые доки HTML: Горизонтальная линия

Q: Как добавить горизонтальную линию в HTML?

Используйте тег на отдельной строке. Это пустой элемент без закрывающего тега, и он рисует линию на всю ширину своего контейнера.

Q: Как изменить цвет hr?

Уберите рамку по умолчанию и нарисуйте свою: hr { border: none; border-top: 2px solid #2563eb; }. Одно лишь color тоже меняет цвет, но стиль inset по умолчанию оставляет линию затененной и двухцветной.

Q: Как сделать hr толще?

Задайте толщину рамки: hr { border: none; border-top: 4px solid #111827; }. Атрибут size из старых учебников в браузерах все еще работает, но он устарел, поэтому используйте CSS.

Горизонтальная линия в HTML: тег hr и его стили

Горизонтальную линию в HTML рисует тег <hr>. Разберем, что он означает, как изменить его цвет, толщину, ширину и стиль через CSS, как сделать разделитель с текстом посередине и как нарисовать вертикальную линию.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как добавить горизонтальную линию

Поставьте <hr> между двумя блоками содержимого. Закрывающего тега у него нет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

По умолчанию линия занимает всю ширину контейнера, имеет небольшие отступы сверху и снизу и рисуется тонкой серой рамкой в стиле inset (светлый и темный край).

<hr> означает horizontal rule, «горизонтальная черта». В HTML это тематический разрыв: смена темы или сцены внутри раздела. Программы чтения с экрана объявляют его как разделитель. Если нужна только декоративная линия (под заголовком, вокруг карточки), нарисуйте ее CSS-рамкой у самого элемента.

Стили hr через CSS

Вид по умолчанию задают рамки, поэтому надежный способ оформить <hr> это убрать их и нарисовать одну рамку самому:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

Что изменить	Что использовать
Цвет	`border-top: 2px solid #2563eb` (после `border: none`)
Толщину	Ширину в этой рамке, например `6px`
Стиль	`solid`, `dashed`, `dotted`, `double`
Длину	`width: 40%` плюс `margin-inline: auto` для центрирования
Скругленные концы	`height` + `background` + `border-radius` вместо рамки
Отступы вокруг	`margin`

Если задать hr только color: blue, в современных браузерах линия изменится, но стиль inset по умолчанию ее затеняет, и она сохраняет высоту 2px. Сброс рамки дает ровно то, что вы задали.

Старые атрибуты hr

В старом коде атрибуты пишут у самого тега:

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade и align устарели. Браузеры все еще их применяют, чтобы старые страницы выглядели правильно, но это некорректный HTML, который потом сложнее менять. Замените их на CSS выше.

Разделитель с текстом посередине

Линия «или» между двумя кнопками входа это не <hr> (hr не может содержать текст). Это flex-строка, в которой по обе стороны слова нарисовано по линии:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

Части ::before и ::after через flex: 1 занимают по половине свободного места и рисуют верхнюю рамку. Замените or на слово подлиннее, и линии сократятся.

Вертикальные линии

Вертикального варианта <hr> нет. Нарисуйте вертикальную линию рамкой с одной стороны элемента или тонким элементом внутри flex-строки:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start ставит линию в начале текста, то есть слева в русском и английском и справа в арабском или иврите, поэтому раскладка работает в обоих направлениях.

Частые ошибки

</hr>. <hr> это пустой элемент. Достаточно <hr> или <hr />.
<hr> для украшения. Программы чтения с экрана объявляют каждый. Линия, которая нужна только для вида, относится к CSS.
Стили только через color. Сбросьте рамку через border: none и задайте border-top.
Линии из <br> или подчеркиваний. Используйте <hr> или рамку. Для чего нужен <br>, читайте на странице перенос строки.
Устаревшие атрибуты. Перенесите size, width, color и noshade в CSS.

Часто задаваемые вопросы

Как добавить горизонтальную линию в HTML?

Используйте тег <hr> на отдельной строке. Это пустой элемент без закрывающего тега, и он рисует линию на всю ширину своего контейнера.

Как изменить цвет hr?

Уберите рамку по умолчанию и нарисуйте свою: hr { border: none; border-top: 2px solid #2563eb; }. Одно лишь color тоже меняет цвет, но стиль inset по умолчанию оставляет линию затененной и двухцветной.

Как сделать hr толще?

Задайте толщину рамки: hr { border: none; border-top: 4px solid #111827; }. Атрибут size из старых учебников в браузерах все еще работает, но он устарел, поэтому используйте CSS.

Как расшифровывается hr?

Horizontal rule, «горизонтальная черта». В современном HTML он означает тематический разрыв: смену темы или сцены между абзацами. Программы чтения с экрана объявляют его как разделитель.

Как сделать вертикальную линию в HTML?

Тега для вертикальной линии в HTML нет. Добавьте рамку с одной стороны элемента, например border-inline-start: 2px solid #e5e7eb, или используйте узкий элемент с цветом фона внутри flex-строки.

Связанные концепции