W3G

border-styleプロパティの値

値には以下のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。

none

枠線なし（ボーダーの幅の値は強制的に0になる）

hidden

枠線なし（"border-collapse : collapse ;" の表の場合に、該当する辺のボーダーの描写を抑制）

dotted

点線（丸い点線）

dashed

破線（四角い点線）

solid

実線

double

二重線

groove

立体枠（窪み）

ridge

立体枠（隆起）

inset

立体枠（内側全体が窪み）

outset

立体枠（内側全体が隆起）

値を1つだけ指定した場合は、その指定が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。また、border-colorプロパティと border-widthプロパティ（0以外の値）を指定していても、border-styleプロパティの指定がない場合は、UA の初期値が "none" に設定されているため、ボーダーは描写されません。逆に border-styleプロパティだけでボーダーの幅と色が省略されても、border-widthプロパティの値は "midium"、border-colorプロパティの値は当該要素に指定されている、または継承されている colorプロパティの前景色（文字色）がボーダーの色として適用されるので、ボーダーは描写されます。

"none" と "hidden" はどちらも枠線を表示しない効果ですが、"hidden" は table要素に "border-collapse : collapse ;" が指定されている場合に、結合しているボーダーの表示を消すために用いられます。

ボーダーの種類の上・下・左・右を個別指定

border-top-style

上辺のボーダー（枠線）の種類（スタイル）を指定する

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

border-bottom-style

下辺のボーダー（枠線）の種類（スタイル）を指定する

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

border-left-style

左辺のボーダー（枠線）の種類（スタイル）を指定する

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

border-right-style

右辺のボーダー（枠線）の種類（スタイル）を指定する

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

上・下・左・右の四辺のボーダーの種類を個別に指定する場合は、これら4つのプロパティが用意されています。border-styleプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。

border-styleプロパティの実装状況

IE

◯：IE6, 7は "hidden" の値を未サポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

border-top-styleプロパティ, border-bottom-styleプロパティ, border-left-styleプロパティ, border-right-styleプロパティも同上。

サンプル

.dotted { border-style : dotted ; border-color : #ff4500 ; }
.dashed { border-style : dashed ; border-color : #9f6 ; }
.solid  { border-style : solid ; border-color : #3f6 ; }
.double { border-style : double ; border-color : #f30 ; }
.groove { border-style : groove ; border-color : #0c6 ; }
.ridge  { border-style : ridge ; border-color : #36f ; }
.inset  { border-style : inset ; border-color : #c30 ; }
.outset { border-style : outset ; border-color : #03c ; }
li      { border-width : thick ; }

UAによってボーダーのスタイルは異なった表示になります。たとえば、Internet Explorer では "dotted" は丸い点線で表示されますが、Chrome, Firefox, Safari, Opera では破線（四角い点線）で表示されます。また、"dashed" においても点線の枠の間隔がそれぞれ異なります。