border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティ
border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティの概要
| 機能 |
ボーダー（枠線）の色を上下左右で個別に定義 |
| 指定可能な値 |
色 |
| 初期値 |
colorプロパティによる |
| 継承 |
しない |
| 適用可能なボックス |
全て |
border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティは、要素のボーダー（枠線）の色を上下左右で個別に定義します。ただし、枠線のスタイルがborder-styleプロパティ等で指定されていなければ、設定は反映されません。
div.blue {
border-left-style: solid;
border-left-color: blue;
}
div.orange {
border-right-style: solid;
border-right-color: orange;
}
div.green {
border-top-style: solid;
border-top-color: green;
}
div.red {
border-bottom-style: solid;
border-bottom-color: red;
}
div.pink {
border-left-style: solid;
border-right-style: solid;
border-left-color: pink;
border-right-color: pink;
}
div.gray {
border-top-style: solid;
border-bottom-style: solid;
border-top-color: gray;
border-bottom-color: gray;
}
div.purple {
border-left-style: solid;
border-top-style: solid;
border-left-color: purple;
border-top-color: purple;
}
div.yellow {
border-right-style: solid;
border-bottom-style: solid;
border-right-color: yellow;
border-bottom-color: yellow;
}
このプロパティはあまり使用されません
これら、border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティを使用して表示するスタイルは、
- border-top
- border-right
- border-bottom
- border-left
を使用しても実現できるので、通常、あまり使用することはありません。
|
2009 W-D-L.NET
border-color
このページの先頭