概要

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

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素. It also applies to ::first-letter.
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序形式文法で定義される一意のあいまいでない順序

構文

 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: 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つの異なる幅の境界線、右は無し。 */

仕様

ブラウザの互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本機能 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.9.2) ? ? ? ?

参考

border, border-style, border-color

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Sebastianz, Prinz_Rana, teoli, ethertank, Yuichiro
 最終更新者: Sebastianz,