border-colorプロパティの概要
機能	ボーダー（枠線）の色を定義
指定可能な値	色
初期値	colorプロパティによる
継承	しない
適用可能なボックス	全て

border-colorプロパティは、要素のボーダー（枠線）の色を定義します。ただし、borderや、border-styleプロパティで枠線が定義されていないと、このborder-colorプロパティは意味を持ちません。

border-colorプロパティの値には、カラーネームを記述するか、RGB値を指定します。



h2 {


    border-style: solid;


    border-color: #0c0;


}


div {


    border-style: solid;


    border-color: green;


}

各辺を個別に設定

border-colorの値をスペースで区切って、複数指定すると、各辺の色を個別に設定することができます。ただし、この方法は、直感的に分かりやすいとは思えないので、あまりお勧めしません。

値を指定する数による、個々の辺の設定
値の数	設定される辺
1	4辺全て
2	最初の値が上下、2番目の値が左右
3	最初の値が上、2番目の値が左右、3番目の値が下
4	最初の値が上、2番目の値が右、3番目の値が下、4番目の値が左



div.number1 {


    border-style: solid;


    border-color: blue;


}


div.number2 {


    border-style: solid;


    border-color: blue orange;


}


div.number3 {


    border-style: solid;


    border-color: blue orange green;


}


div.number4 {


    border-style: solid;


    border-color: blue orange green red;


}

このborder-colorプロパティはあまり使用されません

borderプロパティを使用すれば、枠線の色に関する指定も可能ですので、通常はborder-colorプロパティを使用せずに、borderプロパティを使用します。

border-xxx-width

このページの先頭

border-xxx-color

Copyleft

2009 W-D-L.NET

サイト管理者に連絡