border-width

概要

CSSプロパティ border-width は、ボックスの境界線の幅を設定します。ショートカットプロパティborderを使用した方が、便利なことが多いです。

構文

 border-width:  <border-width> {1,4}

値

1個か2個か3個か4個の <border-width> の値を取ることができます。空白で区切られたこれらの値は、上下左右のボックスの境界線幅を設定します。

1個の値が設定されている場合、4辺全てに適用されます。
2個の値が設定されている場合、1つ目は上下の辺に、2つ目は左右の辺に適用されます。
3個の場合は、上、右、下に適用されます。左の辺は2番目の値が使われます。
4個の場合は、上、右、下、左の順の辺に適用されます。

<border-width>

1個の値またはキーワードを取ります:   <length> | thin | medium | thick

thin

UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 1px になります。 IE 4-7 では 2px になります。

medium

UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 3px になります。 IE 4-7 では 4px になります。

thick

UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 5px になります。 IE 4-7 では 6px になります。

<length>

境界線の太さは明確な値を持っています。負の値は使用できません。使用できる単位は <length> を参照してください。

関連するプロパティ

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width 

サンプル

border: ridge #ccc;
border-width: 6px;  /* "border: ridge #ccc 6px"としても同じです。4辺全てに太さ 6px の境界線。 */

border: solid red;
border-width: 2px 10px;  /* 上下に 2px、左右に 10px の太さの境界線。 */

border: dotted orange;
border-width: 0.3em 0;   /* 上下に太さ 0.3em の境界線、左右は無し。 */

border: solid lightgreen;
border-width: medium 0 1px thick;  /* 3つの異なる幅の境界線、右は無し。 */

仕様

• CSS 2.1 Box #border-width
• CSS 3 Background #border-width

ブラウザの互換性

参考

border, border-style, border-color