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;