CSS ボーダー

すべての辺にボーダーがあります。

下辺に赤いボーダーがあります。

角が丸くなったボーダーがあります。

左辺に青いボーダーがあります。

CSS Border Style

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の値によって異なります。

インセットボーダー。効果はborder-colorの値によって異なります。

アウトセットボーダー。効果はborder-colorの値によって異なります。

ボーダーなし。

隠されたボーダー。

混合ボーダー。