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;