hrタグの太さをCSSで指定する方法

最終更新日:

水平線を挿入するタグとして<hr>タグがあります。 単に<hr>と記述した場合、水平線の太さはブラウザによって違ってきます。

そこでCSSで太さを指定することで、どのブラウザでも太さが統一されます。

太さが1px、種類は直線、色はsilverの水平線を指定するには 次のように記述します。

CSS

hr {
  border-width: 1px 0 0 0; /* 太さ */
  border-style: solid; /* 種類 */
  border-color: silver; /* 色 */
}

border-widthの設定がポイントとなります。 border-topに対して表示させたい太さを指定、それ以外は0を指定します。

省略して、次のように指定しても太さがうまく表示されません。 1pxよりも太い水平線が表示されます。

hr {
  border: 1px solid silver;
}