CSS の border プロパティを使用すると、要素の境界線のスタイル、幅、色を指定できます。
四方に枠線を付けました。
赤い下の境界線があります。
枠線を丸くしました。
青い左枠があります。
border-style 属性は、表示する境界線のタイプを指定します。
次の値が許可されます:
dotted - 点線の境界線を定義しますdashed - 破線の境界線を定義しますsolid - 実線の境界線を定義しますdouble - 二重境界線を定義しますgroove - 3D 溝の境界線を定義します。 効果はborder-color値によって異なりますridge - 3D リッジ境界を定義します。 効果はborder-color値によって異なりますinset - 3D 差し込み枠を定義します。 効果はborder-color値によって異なりますoutset - 3D アウトセット境界線を定義します。 効果はborder-color値によって異なりますnone - 境界線を定義しませんhidden - 隠し境界線を定義しますborder-style 属性には、1 ～ 4 つの値 (上、右、下、左の境界線) を指定できます。
さまざまな境界線スタイルのデモ:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
結果:
点線の境界線。
破線の境界線。
実線の境界線。
二重線の境界線。
溝の境界線。 その効果は、border-color の値によって異なります。
リッジ付きの境界線。 その効果は、border-color の値によって異なります。
3D はめ込み枠。 その効果は、border-color の値によって異なります。
3D アウトセットの境界線。 その効果は、border-color の値によって異なります。
枠線なし。
ブレンドされた境界線。
注: border-style 属性が設定されていない限り、他の CSS 境界線プロパティ (次の章で詳しく説明します) には何も設定されません。効果！