border-widthプロパティは上下左右の四辺のボーダー(枠線)の幅(太さ)をまとめて指定できる簡略化プロパティです。
medium)を参照値には <長さ>、または下記のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。値を1つだけ指定した場合は、その幅が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。border-widthプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定(負の値は不正)これらのキーワードが対応する数値の解釈は、UA の設定に依存します。ただし、"thin" < "medium" < "thick" の関係は保たれることでしょう。参考として、Windows版Internet Explorer では "thin" が2px、"medium" が4px、"thick" が6px に設定されています。また、border-widthプロパティの指定を省略した場合は、自動的に "medium" が初期値として適用されます。なお、ボーダーの種類の指定がない場合、UA のボーダーの種類は初期値が "none" となっている(ボーダーの種類が "none" だと、ボーダーの幅は強制的に0になる)ため、ボーダーを描写するには border-styleプロパティなりでその値を変える必要があります。
border-top-widthborder-bottom-widthborder-left-widthborder-right-width上・下・左・右の四辺のボーダーの幅を個別に指定する場合は、これら4つのプロパティが用意されています。border-widthプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。
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 ; }