Делаем красивый горизонтальный разделитель (hr)

Делаем красивый горизонтальный разделитель (hr) Старый добрый horizontal rule (hr)
часто используется
для того, чтобы разделить контент в смысловом значении. Но также часто
он не очень хорошо вписывается в дизайн и структуру сайта. Именно
поэтому в нём уже давно не существует таких атрибутов как size,
color,
noshade,
align
и width.
Все эти атрибуты — deprecated, и вместо них лучше
использовать таблицы стилей CSS.

Сразу начну с проблемы. Все дело в том, что даже самые последние
браузеры по разному воспринимают цвет разделителя hr,
заданный через CSS. Если обратиться к документации на сайте Opera, то
их браузером цвет определяется не свойством color,
а свойством
background.
Но на практике оказалось совсем по другому.
Браузер Opera не окрашивается горизонтальный разделитель ни
через background,
ни через color.

hr {

background
: #CCCCCC;

color
: #CCCCCC;

height
: 1px

}

Из всего из этого Opera правильно распознаёт только атрибут
height
: 1px .

Однако пару дней назад мне всё-так удалось закрасить горизонтальный
разделитесь в нужный мне цвет. Я сделал это через добавления свойства
border-top
:

код:

hr {

height
: 1px

background
: #CCCCCC;

color
: #CCCCCC;

border-top
: 1px solid #CCCCCC;

}

Этот стиль работает правильно в Netscape
Navigator 6+, Internet Explorer 4+, Opera 5.12 и выше. Что
касается Netscape Navigator 4.x, то плевать он хотел на это
стилевое определение hr.

Ну всё, с CSS мы разобрались. Но я всё же решил поэкспериментировать и
закрасить горизонтальный разделитесь только с помощью HTML-разметки.
Приведённые ниже коды работают в очень широком диапазоне браузеров.

Что
хотим сделать:

С помощью одной только HTML-разметки вывести горизонтальный
разделитесь, который растягивался бы на всю ширину окна, был высотой в
один пиксель и имел серый цвет.