Тег 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;">
: