HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー スタイル

border-styleプロパティ

要素の4辺に引くボーダーのスタイルを指定します。

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    全要素

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

none

ボーダーは表示されません。他にボーダー指定がされている場合はそちらが優先されます。

hidden

ボーダーは表示されません。他にボーダー指定がされていても、こちらの値が優先されます。

dotted

ボーダーを点線で表示します。「dashed」よりも細かい点線になります。

dashed

ボーダーを破線で表示します。

solid

ボーダーを実線で表示します。

double

ボーダーを2本の実線で表示します。

groove

立体的に凹みのあるボーダーを表示します。

ridge

立体的なボーダーを表示します。「groove」とは反対に凸みのある線になります。

inset

4辺全てにこのスタイルを指定することで、立体的に凹みのあるボーダーを表示します。

outset

4辺全てにこのスタイルを指定することで、立体的に凸みのあるボーダーを表示します。


パターン1

4辺(toprightbottomleft)のボーダースタイルを一括指定する例です。次のように、すべてのボーダーに異なる指定をすることができます。

CSSコード例

border-style: solid;

表示例:


パターン2

値を4つ指定する場合、toprightbottomleftの順に指定します。

CSSコード例

border-style: solid double ridge dotted;

表示例:


パターン3

値を2つ指定した場合、1つ目の「dashed」はtopbottomに適用され、2つ目の「solid」はleftrightに適用されます。

CSSコード例

border-style: dashed solid;

表示例:


パターン4

値を3つ指定した場合、1つ目の「dashed」はtopに、2つ目の「solid」はleftrightに、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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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