border-top-style:形式	←　上の枠線の形式
border-bottom-style:形式	←　下の枠線の形式
border-left-style:形式	←　左の枠線の形式
border-right-style:形式	←　右の枠線の形式
border-style:形式	←　上・右・下・左の枠線の形式

---

形式：

none	枠線なし　(デフォルト)
hidden	枠線なし
dotted	点線
dashed	破線
solid	直線
double	二重線
groove	溝線
ridge	稜線
inset	凹んだように見える枠線
outset	凸んだように見える枠線

border-styleプロパティで、枠線の形式を指定します。
border-top-style，border-bottom-style，border-left-style，border-right-styleプロパティでそれぞれの枠線の形式を個別に指定することもできますし、border-styleプロパティでまとめて指定することもできます。
まとめて指定するときは、値を半角スペースで区切って指定しますが、値の数によって適用される枠線の組み合わせが変わります。

値が1つのとき ：上下左右に同一の形式 　　例)border-style:dotted; 値が2つのとき ：上下、左右の形式 　　例)border-style:dotted solid; 値が3つのとき ：上、左右、下の形式 　　例)border-style:dotted solid double; 値が4つのとき ：上、右、下、左の形式 　　例)border-style:dotted solid double groove;

border-styleプロパティを省略するとデフォルトの「none」が適用されます。
このとき、border-widthプロパティで枠線の太さを指定していても枠線は表示されません。
「none」と「hidden」はどちらも枠線を表示しませんが、テーブルとセルの枠線として重なり合った場合は、「none」は他の値を優先し、「hidden」は自分自身の値を優先するという違いがあります。


枠線の種類

none	dotted	solid	groove	inset
hidden	dashed	double	ridge	outset

<STYLE type="text/css">
<!--
P { border-color:#3399ff; padding:0.5em; }
.case1  { border-style : none; }
.case2  { border-style : hidden; }
.case3  { border-style : dotted; }
.case4  { border-style : dashed; }
.case5  { border-style : solid; }
.case6  { border-style : double; }
.case7  { border-style : groove; }
.case8  { border-style : ridge; }
.case9  { border-style : inset; }
.case10 { border-style : outset; }
-->
</STYLE>

<TABLE width="100%" cellpadding="5" cellspacing="0">
<TR>
<TD align="center" width="20%">
<P class="case1">none</P></TD>
<TD align="center" width="20%">
<P class="case3">dotted</P></TD>
<TD align="center" width="20%">
<P class="case5">solid</P></TD>
<TD align="center" width="20%">
<P class="case7">groove</P></TD>
<TD align="center" width="20%">
<P class="case9">inset</P></TD>
</TR>
<TR>
<TD align="center" width="20%">
<P class="case2">hidden</P></TD>
<TD align="center" width="20%">
<P class="case4">dashed</P></TD>
<TD align="center" width="20%">
<P class="case6">double</P></TD>
<TD align="center" width="20%">
<P class="case8">ridge</P></TD>
<TD align="center" width="20%">
<P class="case10">outset</P></TD>
</TR>
</TABLE>

上の枠線の形式

border-top-style:solid;

下の枠線の形式

border-bottom-style:solid;

左の枠線の形式

border-left-style:solid;

右の枠線の形式

border-right-style:solid;

<STYLE type="text/css">
<!--
P { border-color:#3399ff; padding:0.5em; }
.case11 { border-top-style    : solid; }
.case12 { border-bottom-style : solid; }
.case13 { border-left-style   : solid; }
.case14 { border-right-style  : solid; }
-->
</STYLE>

上の枠線の形式
<P class="case11">border-top-style:solid;</P>
下の枠線の形式
<P class="case12">border-bottom-style:solid;</P>
左の枠線の形式
<P class="case13">border-left-style:solid;</P>
右の枠線の形式
<P class="case14">border-right-style:solid;</P>

値が1つのとき：上下左右に同一の形式

border-style:dotted;

値が2つのとき：上下、左右の形式

border-style:dotted solid;

値が3つのとき：上、左右、下の形式

border-style:dotted solid double;

値が4つのとき：上、右、下、左の形式

border-style:dotted solid double groove;

<STYLE type="text/css">
<!--
P { border-color:#3399ff; padding:0.5em; }
.case21 { border-style : dotted; }
.case22 { border-style : dotted solid; }
.case23 { border-style : dotted solid double; }
.case24 { border-style : dotted solid double groove; }
-->
</STYLE>
値が1つのとき：上下左右に同一の形式
<P class="case21">border-style:dotted;</P>
値が2つのとき：上下、左右の形式
<P class="case22">border-style:dotted solid;</P>
値が3つのとき：上、左右、下の形式
<P class="case23">border-style:dotted solid double;</P>
値が4つのとき：上、右、下、左の形式
<P class="case24">border-style:dotted solid double groove;</P>