border-styleプロパティ

値

次の値をスタイルとして指定することができます。

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;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。