値
次の値をスタイルとして指定することができます。
- none
ボーダーは表示されません。
他にボーダー指定がされている場合はそちらが優先されます。- hidden
ボーダーは表示されません。
他にボーダー指定がされていても、こちらの値が優先されます。- dotted
ボーダーを点線で表示します。
「dashed」よりも細かい点線になります。- dashed
ボーダーを破線で表示します。
- solid
ボーダーを実線で表示します。
- double
ボーダーを2本の実線で表示します。
- groove
立体的に凹みのあるボーダーを表示します。
- ridge
立体的なボーダーを表示します。
「groove」とは反対に凸みのある線になります。- inset
4辺全てにこのスタイルを指定することで、立体的に凹みのあるボーダーを表示します。
- outset
4辺全てにこのスタイルを指定することで、立体的に凸みのあるボーダーを表示します。
パターン1
4辺（top、right、bottom、left）のボーダースタイルを一括指定する例です。次のように、すべてのボーダーに異なる指定をすることができます。
CSS コード例
border-style: solid;表示例
パターン2
値を4つ指定する場合、top、right、bottom、leftの順に指定します。
CSS コード例
border-style: solid double ridge dotted;表示例
パターン3
値を2つ指定した場合、1つ目の「dashed」はtop、bottomに適用され、2つ目の「solid」はleft、rightに適用されます。
CSS コード例
border-style: dashed solid;表示例
パターン4
値を3つ指定した場合、1つ目の「dashed」はtopに、2つ目の「solid」はleft、rightに、3つ目の「dotted」はbottomに適用されます。
CSS コード例
border-style: dashed solid dotted;表示例
パターン5
スタイル「inset」「outset」は、4辺全てのボーダーに同じスタイルを適用することで立体感を表すことができます。
CSS コード例
border-style: outset;表示例
パターン6
次のように、4辺のボーダーそれぞれに対して個別にスタイルを指定することも可能です。
topだけ指定したい場合や、一括指定した後に特定のボーダーだけスタイルを上書きしたい場合に使用します。
CSS コード例
border-top-style: dashed;
border-right-style: double;
border-bottom-style: solid;
border-left-style: double;表示例