Тег <hr> (горизонтальная линия) является отличным средством для семантического разделения или прерывания контента на странице. Можно заменить его на изображение, которое будет гармонировать с общей стилистикой страницы.
По умолчанию тег <hr> формирует простую и довольно уродливую линию или монструозную 3D обводку. С помощью свойства CSS background можно задать использование изображения, обратив внимание на высоту элемента, чтобы использовать только одну копию картинки, и на отсутствие обводки:
hr {
background:url(spiral-shape.png) no-repeat top center;
height:42px;
border:none !important;
}
Как обычно, всю простоту нарушает Internet Explorer (версии 7 и меньше), для которого потребуется использовать специфический код CSS (конечно, если вы собираетесь поддерживать IE). Можно сделать отдельный файл CSS для IE и подключить его к странице с помощью условного комментария, например, так:
<!--[if lte IE 7]>
<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]-->
А для корректного вывода изображения вместо горизонтальной линии использовать следующий код для IE (в файле ie.css):
hr {
display:list-item;
list-style:url(spiral-shape.png) inside;
filter:alpha(opacity=0);/* избавляемся от горизонтальной линии */
width:0; /* предотвращаем копирование изображения */
margin-top:-10px;
}