ボーダーの幅 (Border width)

 
ボックスモデル
ホーム > CSS2 Note > ボーダーの幅
C1- ie4- N4-

説明

border-width: top right bottom left; C1- ie4- N4-

border-top-width: top;       C1- ie4- N4-
border-right-width: right;   C1- ie4- N4-
border-bottom-width: bottom; C1- ie4- N4-
border-left-width: left;     C1- ie4- N4-
値:  [ thin | medium | thic | <長さ> ] | inherit
初期値:medium適用要素:すべて継承:しない%値:なしメディア:ビジュアル
ボーダーの幅を指定します。簡略化プロパティ「border-width」は、四辺のボーダーの幅を半角スペース[ ]区切りの値で同時に指定できます。

border-styleプロパティを指定しないと、初期値 border-style:none が設定されボーダーが表示されないので注意してください。また、border-colorプロパティが指定されていない場合、ボーダーの色は文字色(colorプロパティ)の値を参照します。

border-widthのレンダリング
 
 

簡略化プロパティ「border-width」について



簡略化プロパティ「border-width」は、値が1つのとき上右下左のボーダーの幅に適用されます。値が2つのとき、1つ目が上下、2つ目が右左のボーダーの幅に適用されます。値が3つのとき、1つ目が上、2つ目が右左、3つ目が下のボーダーの幅に適用されます。値が4つのとき上から時計回りに上、右、下、左のボーダーの幅に適用されます。

すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。
値の適用
 

使用例

h1 {border-width:thick medium thin; border-style:solid}
h2 {border-bottom-width:2px; border-bottom-style:solid}
 

ボーダーの幅の値 <border-width>

thinC1- ie4- N4- 細線。
mediumC1- ie4- N4- 通常線。初期値。
thickC1- ie4- N4- 太線。
長さC1- ie4- N4- ボーダーの太さを値として明示します。負の値は不正な値です。

ボーダーの幅に1つの値

 

ボーダーの幅に1つ以上の値

 

ボーダーの幅、上、右、下、左

 
関連項目: margin | padding | border | border-width | border-color | border-style
トップページ CSS2 Note ページトップ
 2005/09/22発行 2008/01/01更新