【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;

関連記事

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト