border-colorプロパティ
border-colorプロパティの概要
機能 |
ボーダー(枠線)の色を定義 |
指定可能な値 |
色 |
初期値 |
colorプロパティによる |
継承 |
しない |
適用可能なボックス |
全て |
border-colorプロパティは、要素のボーダー(枠線)の色を定義します。ただし、borderや、border-styleプロパティで枠線が定義されていないと、このborder-colorプロパティは意味を持ちません。
border-colorプロパティの値には、カラーネームを記述するか、RGB値を指定します。
example.css
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番目の値が左 |
example2.css
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プロパティを使用します。