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

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

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

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

まずborder全体に対して「none」を指定します。 次にborder-top プロパティに 線の太さ、種類、色を指定します。 種類は点線を示す「dotted」を指定してください。 こうすることで border-topのみが表示されright、bottom、leftは表示されません。

次のようにtop・right・bottom・leftを別々に記述しても効果(結果)は同じです。

hr {
    border-top: 2px dotted blue;
    border-right: none;
    border-bottom: none;
    border-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;

関連記事

HTML・CSS入門