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

Результат:

Вижте също