border-style

ボーダースタイル（レイアウトとボックスモデル）

意味枠線のスタイル

border-styleとは？

border-styleプロパティは、要素の枠線のスタイルを指定するために使います。このプロパティによって、枠線が実線、点線、二重線など、さまざまなスタイルで表示されるように設定できます。

border-styleの具体的な使い方

実線の枠線を設定する例

<style>
    div {
        border-style: solid;
    }
</style>

<div>
    このdiv要素には実線の枠線があります。
</div>

ページ内の全てのdiv要素に実線の枠線を適用しています。

各辺に異なるスタイルの枠線を設定する例

<style>
  .multi-style {
    border-style: dotted dashed solid double;
  }
</style>

<div class="multi-style">
  異なるスタイルの枠線
</div>

要素の各辺に異なるスタイルの枠線を適用しています。上辺が点線、右辺が破線、下辺が実線、左辺が二重線になります。

border-styleに関するよくある質問

Q. border-styleの主な値は？

A. border-styleの主な値には、solid（実線）、dotted（点線）、dashed（破線）、double（二重線）、groove（溝型）、ridge（浮き出し型）、inset（陥没型）、outset（浮き出し型）があります。

Q. border-styleを指定しないと？

A. border-styleを指定しない場合、デフォルトではnone（枠線なし）となります。そのため、border-widthやborder-colorを指定しても枠線は表示されません。枠線を表示するには、必ずborder-styleを指定する必要があります。

Q. border-styleの値の順序は？

A. border-styleに複数の値を指定する場合、順序は「上右下左」です。2つの値の場合は「上下左右」、3つの値の場合は「上左右下」となります。これはborder-widthやborder-colorと同じ規則です。

border-styleが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのborder-styleやborder-width、max-width、margin-top、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。