border-width

Updated / Published

border-widthプロパティは上下左右の四辺のボーダー(枠線)の幅(太さ)をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。

初期値
medium
適用対象
すべての要素(分離ボーダーモデルの表のうち列・列グループ・行・行グループ要素を除く)
継承
しない
メディア
visual

border-widthプロパティの値

値には <長さ>、または下記のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。値を1つだけ指定した場合は、その幅が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。border-widthプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
thin
細め
medium
標準
thick
太め

これらのキーワードが対応する数値の解釈は、UA の設定に依存します。ただし、"thin" < "medium" < "thick" の関係は保たれます。参考として、Internet Explorer では "thin" が2px、"medium" が4px、"thick" が6px に設定されています。また、border-widthプロパティの指定を省略した場合は、自動的に "medium" が初期値として適用されます。なお、ボーダーの種類の指定がない場合、UA のボーダーの種類は初期値が "none" となっている(ボーダーの種類が "none" だと、ボーダーの幅は強制的に0になる)ため、ボーダーを描写するには border-styleプロパティの類でその値を変える必要があります。

ボーダーの幅の上・下・左・右を個別指定

border-top-width
上辺のボーダー(枠線)の幅(太さ)を指定する
border-bottom-width
下辺のボーダー(枠線)の幅(太さ)を指定する
border-left-width
左辺のボーダー(枠線)の幅(太さ)を指定する
border-right-width
右辺のボーダー(枠線)の幅(太さ)を指定する

上・下・左・右の四辺のボーダーの幅を個別に指定する場合は、これら4つのプロパティが用意されています。border-widthプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。

border-widthプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

border-top-widthプロパティ, border-bottom-widthプロパティ, border-left-widthプロパティ, border-right-widthプロパティも同上。

サンプル

.thin   { border-width : thin ; }
.medium { border-width : medium ; }
.thick  { border-width : thick ; }
li      { border-style : solid ; border-color : #ff4500 ; }