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;