【border-width】ボーダーの太さを一括指定

border-widthプロパティでは、上下左右のボーダー(枠線)の太さを一括で(まとめて)指定することができます。 値を1つだけ指定した場合は上下左右の太さが同じになりますが、複数の値を半角スペースで区切って指定すると、値の数によって次のように適用されます。

  • 値が1つの場合……「上下左右」
  • 値が2つの場合……「上下」「左右」
  • 値が3つの場合……「上」「左右」「下」
  • 値が4つの場合……「上」「右」「下」「左」

なおボーダーの太さ(幅)に負の値を指定する事はできませんので注意して下さい。値に「0」を指定した場合は、ボーダーは表示されません。

またborder-widthで太さを指定しただけでは、ボーダーは表示されません。 これはボーダーの種類(border-style)の初期値が「none」となっているためです。 太さの指定を有効にし、ボーダーを表示するにはborder-widthと併せて、border-style(ボーダーの種類)を設定し「none」「hidden」以外の値を指定する必要があります。

書式

  • border-width : ……… ボーダーの太さ(幅)をまとめて指定

★:thin、medium、thick、実数値+単位、inherit

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

使用した時の例

p {border-style:solid;}

.sample1 {border-width:1px;}
.sample2 {border-width:1px 5px;}
.sample3 {border-width:1px 5px 10px;}
.sample4 {border-width:1px 5px 10px 15px;}
.sample5 {border-width:thin;}
.sample6 {border-width:medium;}
.sample7 {border-width:thick;}
.sample8 {border-width:0px 1px 3px 15px;}
<p class="sample1">[上下左右]1px</p>
<p class="sample2">[上下]1px [左右]5px</p>
<p class="sample3">[上]1px [左右]5px [下]10px</p>
<p class="sample4">[上]1px [右]5px [下]10px [左]15px</p>
<p class="sample5">[上下左右]thin</p>
<p class="sample6">[上下左右]medium</p>
<p class="sample7">[上下左右]thick</p>
<p class="sample8">[上]0px [右]1px [下]3px [左]15px</p>

ブラウザ上の表示例

[上下左右]1px

[上下]1px [左右]5px

[上]1px [左右]5px [下]10px

[上]1px [右]5px [下]10px [左]15px

[上下左右]thin

[上下左右]medium

[上下左右]thick

[上]0px [右]1px [下]3px [左]15px

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報