Прямая линия очень интересный элемент html. 
.
Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой
Для создания прямой линии в HTML применяется тег <hr>. Он является блочным элементом и, значит, всегда начинается с новой строки.
Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.
Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.
В представленных ниже вариантах кода, я использую атрибут style, значения которого являются по сути свойствами css.
<hr style="width:90%"> - длина относительно блока контента, по умолчанию прямая линия занимает 100%Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.
<hr style="width:90%; height:5px;" >Цвет линии задаётся свойством background, в значении которого указывается код цвета.
<hr style="width:90%; height:10px; background:#037FFC;">Можно взять линию в рамку. Для этого в код вводится свойство border.
Причём рамка может быть любого вида доступного для рамок html.
<hr style="width:90%; height:10px; background:#037FFC; border:2px solid #FC0307;"><hr style="width:50%; height:10px; background:#037FFC; border:dashed 2px #FC0307;"><hr style="width:90%; height:10px; background:#037FFC; border:dotted 2px #FC0307;">Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.
Для этого в код линии, вместо свойства border, вводятся свойства border-top и border-bottom
<hr style="width:90%; height:10px; background:#037FFC; border-top:solid 2px #FC0307; border-bottom:solid 2px #FC0307;">Причём все три линии можно сделать разной толщины, цвета и формы.
<hr style="width:90%; height:10px; background:blue; border-top:dashed 5px red; border-bottom:solid 10px green;">Можно закруглить и даже заострить торцы линии.
Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.
<hr style="width:90%; height:10px; background:#037FFC; border-radius:5px;"><hr style="width:90%; height:10px; background:#037FFC; border-radius:50%;"><hr style="width:90%; height:7px; background:#037FFC; border-radius:50% 50% 0 0;">Если добавить в код свойство теней box-shadow, то можно сделать прямую линию такого вида
<hr style="width:90%; height:10px; background:#037FFC; border-radius:50%; box-shadow:0 0 0 5px #FC0307;">
Или так:
<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 3px #FC0307;">Изменяя третье значение box-shadow, можно размыть края рамки.
<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 3px 5px #FC0307;">А если к комплекту значений box-shadow, через запятую добавить ещё несколько, то можно сделать разноцветную рамку.
<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307;">Если в код добавить свойство transform, то можно сделать её наклонной, или вертикальной.
Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.
<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; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);">
Изменяя цифры в значениях, можно всячески изменить внешний вид линии.
Более подробно о свойствах CSS box-shadow и transform, можно узнать в статье Как сделать тень для текста, картинки, блока.
Желаю творческих успехов.
Перемена
Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!
Форматирование текста. HTML. < < < В раздел > > > Рамки html
В атрибут style добавьте свойства align: left; или align: right;. Если нужно спозиционировать более точно, то вместо них добавьте свойство margin: 0 0 0 0;
Первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева. Если нужно задать отступ только с одной стороны, то в свойстве margin указывается эта сторона: margin-left: 0; и т.п. Если значение больше нуля то к нему добавляются единицы измерения: margin-left: 6px;. Только при использовании свойства margin, текст не будет обтекать линию. Если нужно чтоб обтекал, то свойства align: left; и margin применяются вместе.
Статья интересная, но у меня возник вопрос, если мне нужно линию разместить в левой части страницы или в правой, как мне ее с центра сдвинуть?
Очень интересная статья!