|
カスタム検索
|
|
|
|
|
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プロパティを使用します。
border-xxx-width
ページの先頭
2026 Webデザインレッスン