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

:

←→
↑