border-width

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

意味枠線の太さ

border-widthとは？

border-widthプロパティは、要素の枠線（ボーダー）の太さを指定するために使用します。このプロパティは、要素の上、右、下、左の各辺に対して個別に、または一括して太さを設定することができます。単位にはpx（ピクセル）、em（相対単位）、または特定のキーワード（thin、medium、thick）が使用します。

border-widthの具体的な使い方

各辺に異なる太さの枠線を設定する例

<style>
    p {
        border-style: solid;
        border-width: 1px 2px 3px 4px;
    }
</style>

<p>この段落には異なる太さの枠線があります。</p>

p要素の枠線の太さを上辺に1px、右辺に2px、下辺に3px、左辺に4pxと指定しています。

キーワードを使用して枠線の太さを設定する例

<style>
  .custom-width {
    border-style: solid;
    border-width: thin medium thick;
  }
</style>

<div class="custom-width">
  キーワードを使用した枠線の太さ
</div>

キーワード（thin、medium、thick）を使用して枠線の太さを指定しています。上下がthin、左右がmedium、下がthickになります。

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

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

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

Q. border-widthの単位は？

A. border-widthの単位には主にpx（ピクセル）、em（フォントサイズに対する相対値）、%（親要素に対する相対値）が使用できます。また、thin、medium、thickというキーワードも使えます。

Q. border-widthを0にする意味は？

A. border-widthを0に設定すると、枠線が表示されなくなります。これは、border-styleが設定されていても枠線を非表示にしたい場合に使用します。例えば、特定の状況で枠線を消したい時などに役立ちます。

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

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

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