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

Не требует закрывающего тега.

Примеры

Пример

В данном примере можно наблюдать действие тега hr:

<hr>

Результат выполнения кода:


Пример

Поменяем цвет линии с помощью CSS свойства border-color:

<hr style="border-color: red">

Результат выполнения кода:


Пример

Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color - второе имеет приоритет):

<hr style="color: red">

Посмотреть пример.

Пример

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

<hr style="border: 1px solid red">

Результат выполнения кода:


Пример

Поменяем цвет линии с помощью CSS свойства border-top, задав только верхнюю границу. Теперь двойной линии не будет:

<hr style="border-top: 1px solid red">

Результат выполнения кода:


Пример

Сделаем линию в виде точек с помощью CSS свойства border-top, задав значение dotted вместо solid:

<hr style="border-top: 1px dotted red">

Результат выполнения кода:


Пример

Увеличим толщину линии с помощью CSS свойства border-width:

<hr style="border-width: 10px; border-color: red;">

Результат выполнения кода:


Пример

Сейчас линии добавлена высота height и граница через border. Граница при этом распадется на верхнюю и нижнюю:

<hr style="height: 10px; border: 1px solid red;">

Результат выполнения кода: