ученикам: ушел в отпуск до 15-го июня. в отпуске буду по возможности отвечать на вопросы, но могу пропадать

Тег hr

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

: