hr要素のスタイリング

hrは文面がガラリと変わる部分（追伸など）に区切りとして入れるタグなので結構使う場所がある要素なのではないでしょうか。

hr要素の正体はheight:2pxのブロックです。デフォルトでは背景色は白で黒ボーダーが引いてあるようです。
デフォルトのままではただの黒い線なのでスタイリングをしてみましょう。

デフォルトのhr

---

border:1px solid redを指定した表示。上下に1pxずつheight:2pxのボーダになります。

---

次はborder:noneを指定した表示です。モダンブラウザでは見えなくなりますが、IE7では無視されるようです。(colorで背景色を指定すればその色のボーダーとして見える)

---

ただの色の付いた線を引きたい場合は以下のように指定します。

hr {
    height: 1px;
    border: none;
    background: #ccc;
}

---