CSS: hr 要素(水平線）を点線にする

CSS で hr 要素を点線にするには次のように指定します。

例）太さ 2px、点線、青色の hr 要素


hr {
    border-top: 2px dotted blue;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

まず、border-top プロパティに 線の太さ、種類、色を指定します。 次に top 以外の right、bottom、left は表示しないように「none」を指定します。

表示結果

この方法だと、点線以外にも、border-style で指定できるスタイルを指定できます。

スタイル説明
dotted点線
dashed破線
solid実践
double二重線
groove凹み線
ridge浮き上がった線
inset内側が凹んだ線
outset内側が浮き上がった線

点線

border-top: 2px dotted blue;

破線

border-top: 2px dashed blue;

実線

border-top: 2px solid blue;

二重線

border-top: 4px double blue;

関連記事