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

Результат:

Погледајте такође