---

<hr />

Параметр noshade- убирает объемность (рельефность) линии.

---

<hr noshade="noshade" />

---

параметры:
align- выравнивает линию по центру (center), слева (left) или справа (right).
width- устанавливает длину линии в пикселах или в процентах от ширины окна.
Линия по центру:

---

---

<hr width="50%" /> - объемная <hr noshade="noshade" width="50%" /> - необъемная

Выравнивание линии по левому краю поста:

---

---

- короткая 20% ширины поста

---

---

- средняя 50% ширины поста

---

---

- удлиненная 80% ширины поста
<hr align="left" width="50%" /> - объемная <hr noshade="noshade" align="left" width="50%" /> - необъемная

Выравнивание линии по правому краю поста:

---

---

<hr align="right" width="50%" /> - объемная <hr noshade="noshade" align="right" width="50%" /> - необъемная

или так вертикально:

---

<hr noshade="noshade" align="center" width="3" size="50" />

---

Параметр style - устанавливает вид линии.
свойства: color или background - устанавливают цвет линии.

---

---

<hr style="width:50%; height:2px; background:#037FFC;" /> - объемная <hr noshade="noshade" style="width:50%; height:2px; background:#037FFC;" /> - необъемная

---

свойства:
size или height - устанавливает толщину (высоту) линии в пикселах.

---

---

<hr style="width:50%; height:10px; background:#037FFC;" /> - объемная <hr width="50%" color="#00B344" size="10" /> - необъемная

---

если добавить свойство border-radius, то можно сделать:

---

<hr style="width:50%; height:10px; background:#037FFC; border-radius:5px;" /> - с круглыми краями

---

<hr style="width:50%; height:10px; background:#037FFC; border-radius:50%;" /> - с острыми краями

---

свойства:

dashed - пунктирная линия
dotted - точечная линия
solid - непрерывная линия

Линия с бордюром (обводкой):

---

<hr style="width:50%; height:10px; background:#037FFC; border:2px solid #FC0307;" /> - сплошная

---

<hr style="width:50%; height:10px; background:#037FFC; border:dotted 2px #FC0307;" /> - точками

---

<hr style="width:50%; height:10px; background:#037FFC; border:dashed 5px #FC0307;" /> - пунктиром

или так:

---

<hr color="blue" size="7" style="border: dotted 5pt; border-color: red " />

---

<hr color="red" size="9" style="border: dotted 5pt; border-color: blue " />

---

<hr color="black" size="4" style="border: dashed 5pt; border-color: aqua " />

Если ещё добавить свойство box-shadow, то можно и таким линиям сделать бордюр.

---

<hr style="width:50%; height:10px; background:#037FFC; border-radius:50%; box-shadow:0 0 0 5px #FC0307;" />

---

<hr style="width:50%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 3px #FC0307;" />

А если к комплекту значений box-shadow, через запятую добавить ещё несколько, то можно сделать разноцветный бордюр.

---

<hr style="width:50%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307;" />

Добавив свойство transform, то можно сделать её наклонной, или вертикальной

---

<hr style="width: 5%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);" />

---

С помощью линий можно построить и диаграммы:


<div style="float: left; width:25%; height:16px; background-color:orange;"> </div> <div style="float: none;"> 25% - показатель X</div><div style="float: left; width:70%; height:16px; background-color:blue;"> </div><div style="float: none;"> 70% - показатель Y </div><div style="float: left; width:10%; height:16px; background-color:red;"> </div><div style="float: none;"> 5% - показатель Z </div>

---

Цветные линии отображаются на 100% корректно только в IE,
поэтому иногда проще использовать клавиатурные или спец. символы оформленные в виде текстового абзаца:

~~~~~~~~~~~~~~~~~~~~~~~~

<p align="center" style="color:blue;">~~~~~~~~~~~~~~~~~~~~~~~~</p>

---

Изменяя цифры в значениях, можно всячески изменить внешний вид линии.