Тег hr

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

Пример

Давайте посмотрим, как работает тег hr:

html<hr>

Результат:

Пример

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

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

Результат:

Пример

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

html<hr style="color: red">

Результат:

Пример

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

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

Результат:

Пример

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

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

Результат:

Пример

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

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

Результат:

Пример

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

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

Результат:

Пример

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

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

Результат:

Смотрите также