ボーダーの色
(Border color)
ボックスモデル
ホーム
>
CSS2 Note
> ボーダーの色
C1- ie4- N4-
説明
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-
値:
----- hint -----
a b この順序で
a|b どれか1つ
a||b 少なくとも1つ
[...] グループ
a* 0回以上
a+ 1回以上
a? 0回、1回
{a,b} a回以上b回以下
<色>
| transparent |
inherit
初期値:
文字色
、
適用要素:
すべて
、
継承:
しない
、
%値:
なし
、
メディア:
ビジュアル
ボーダーの色を指定します。簡略化プロパティ「border-color」は、四辺のボーダーの色を半角スペース[ ]区切りの値で同時に指定できます。
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}
ボーダーの色の値
色
C1- ie4- N4- 色の値を指定。
transparent
C2- ie7- N6- ボーダーを透明にします(ただし幅はあります)。
ボーダーの色に1つの値
ボーダーの色に1つ以上の値
ボーダーの色、上、右、下、左
ボーダーを透明にする transparet
-ie6は未対応です。
関連項目:
margin
|
padding
|
border
|
border-width
| border-color |
border-style
2005/09/22発行 2009/09/01更新