Кроссбраузерная HTML-линия <hr> на CSS

Кроссбраузерная HTML-линия <hr> на CSS

По умолчанию линия, созданная с помощью элемента <hr>, в разных браузерах отображается специфически, что может не очень хорошо сочетаться с дизайном сайта. Сделаем её кроссбраузерной да ещё такой, какой пожелаем ...

Код ниже позволяет полностью управлять оформлением линии, а также её выравниванием по горизонтали:

hr {
	border: 0;
	border-bottom: 1px solid grey;
	margin: auto;
	width: 50%;
}
border: 0;
скрываем стандартную линию.
border-bottom: 1px solid grey;
рисуем свою линию с любыми характеристиками: толщина, вид, цвет.
margin: auto;
устанавливаем внешние отступы от линии, с помощью которых можно не только делать отбивки сверху и снизу, но и выравнивать линию по горизонтали:
{margin: auto;} — выравнивание по центу;
{margin: auto 0;} — выравнивание по левому краю;
{margin: auto 0 auto auto;} — выравнивание по правому краю.
width: 50%;
задаём ширину линии в 50% от ширины родителя.

Если нужна линия на всю ширину родительского элемента со стандартными отступами по вертикали, то свойства margin и width можно не указывать.

Пример «Кроссбраузерная линия»

Изображение вместо простой линии

Здесь всё просто: воспользуемся свойством border-image — СТОП! У этого свойства есть ограничения, которые заключается в том, что если для элемента установлено свойство border со значением 0, то оно будет игнорироваться. Поэтому border-image не подходит, зато background работает «на ура»:

hr {
	background: url(путь+к+изображению);
	border: 0;
	height: 10px;
}
background: url(путь+к+изображению);
устанавливаем фоновое изображение в качестве линии.
border: 0;
скрываем стандартную линию.
height: 10px;
задаем толщину линии-изображения.

Пример «Изображение вместо простой линии»

Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto и Safari. Отличился только Internet Explorer, который выравнивает линию с классом left не по левому краю, как все остальные браузеры, а по центру.

↑
↓