ラインの両端を背景色になじませることで、リッチな仕切り線を作成できる。
上記の例は以下のようなコードで実装可能。

■HTML

<hr class="gradLine gray">
<hr class="gradLine blue">
<hr class="gradLine green">
<hr class="gradLine red">

■CSS

body {
	background-color:#000;
}

.gradLine {
	border: 0;
	height: 1px;
}

.gradLine.gray {
	background: -webkit-linear-gradient(left, #000 0%, #ccc 30%, #ccc 70%, #000 100%);
}

.gradLine.blue {
	background: -webkit-linear-gradient(left, #000 0%, #00bfff 30%, #00bfff 70%, #000 100%);
}

.gradLine.green {
	background: -webkit-linear-gradient(left, #000 0%, #adff2f 30%, #adff2f 70%, #000 100%);
}

.gradLine.red {
	background: -webkit-linear-gradient(left, #000 0%, #ff6347 30%, #ff6347 70%, #000 100%);
}

上記はWebkit系のブラウザのみでしか動作しないので注意。マルチブラウザ対応にする場合は、linear-gradientプロパティに対して適宜ベンダープレフィックスを追加してやる必要がある。