説明
border-color: top right bottom left; C1- ie4- N4-
border-top-color: top; C2- ie4- N6-
border-right-color: right; C2- ie4- N6-
border-bottom-color: bottom; C2- ie4- N6-
border-left-color: left; C2- ie4- N6-
ボーダーの色を指定します。簡略化プロパティ「border-color」は、四辺のボーダーの色を半角スペース[ ]区切りの値で同時に指定できます。
border-styleプロパティを指定しないと、初期値 border-style:none が設定されボーダーが表示されないので注意してください。また、border-widthプロパティが指定されていない場合、初期値 border-width:medium が設定されます。
border-styleプロパティを指定しないと、初期値 border-style:none が設定されボーダーが表示されないので注意してください。また、border-widthプロパティが指定されていない場合、初期値 border-width:medium が設定されます。
簡略化プロパティ「border-color」について
簡略化プロパティ「border-color」は、値が1つのとき上右下左のボーダーの色に適用されます。値が2つのとき、1つ目が上下、2つ目が右左のボーダーの色に適用されます。値が3つのとき、1つ目が上、2つ目が右左、3つ目が下のボーダーの色に適用されます。値が4つのとき上から時計回りに上、右、下、左のボーダーの色に適用されます。
すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。
すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。
使用例
h1 {border-color:red; border-style:solid}
h2 {border-bottom-color:red; border-bottom-style:solid}
ボーダーの色の値 |
|
ボーダーの色に1つの値
ボーダーの色に1つ以上の値
ボーダーの色、上、右、下、左
ボーダーを透明にする transparet
-ie6は未対応です。
