W3G

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

上辺のボーダー（枠線）の幅（太さ）を指定する

• <長さ>
• thin
• medium
• thick
• inherit

border-bottom-width

下辺のボーダー（枠線）の幅（太さ）を指定する

• <長さ>
• thin
• medium
• thick
• inherit

border-left-width

左辺のボーダー（枠線）の幅（太さ）を指定する

• <長さ>
• thin
• medium
• thick
• inherit

border-right-width

右辺のボーダー（枠線）の幅（太さ）を指定する

• <長さ>
• thin
• medium
• thick
• inherit

上・下・左・右の四辺のボーダーの幅を個別に指定する場合は、これら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 ; }