CSS: hr 要素(水平線)の「色」と「太さ」を指定する

hr 要素(水平線)の「」や「太さ」 をCSSで指定する方法を2通り紹介します。
1つはhr要素をボックスとして考え、もう一つはhr要素のボーダー(枠線)を指定します。

どちらの方法も、 具体例として hrの太さを 4px、色を red に指定しています。

方法①: hr をボックスとして考える

この方法では hr をボックスとして考えます。
高さ(太さ)に「height: 4px」を指定し、 背景色に 「background-color: red」を指定しています。 枠線は必要ないので、「border: none」 を指定します。


hr {
    height: 4px;
    background-color: red;
    border: none;
}

表示結果



方法②: ボーダーを設定する

この方法ではボーダーを設定することで hr の色や太さを設定します。

まずborder-top プロパティに目的の色と太さを設定します。 次に、border-top 以外のプロパティを非表示設定にします。

CSS1

hr {
    border-top: 4px solid red;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

「上のCSS1」と「下のCSS2」は同じ結果となります。 下のCSSは、最初にボーダーの上下左右に対して「none」を指定し、 その後border-topに目的の色と太さを設定します。 短い方を好むなら下の記述を使ってください。

CSS2

hr {
    border-style: none;
    border-top: 4px solid red;
}

表示結果



関連記事

HTML・CSS入門