■ <border-style>

border-styleプロパティは、上下左右のボーダーのスタイルをまとめて指定する際に使用します。 上下左右を異なったスタイルにしたい場合には、スペースで区切って複数の値を指定します。

値を1つ指定した場合： [上下左右]がそのスタイルになります。
値を2つ指定した場合： 記述した順に[上下][左右]のスタイルになります。
値を3つ指定した場合： 記述した順に[上][左右][下]のスタイルになります。
値を4つ指定した場合： 記述した順に[上][右][下][左]のスタイルになります。

■ボーダースタイルの値
none
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。

hidden
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。

solid
1本線で表示されます。

double
2本線で表示されます。

groove
立体的に窪んだ線で表示されます。

ridge
立体的に隆起した線で表示されます。

inset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。

outset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

dashed
破線で表示されます。

dotted
点線で表示されます。