border-color
要素の周囲に表示される境界線の色を指定した値に設定します。
また、border-colorは4方向の境界線にそれぞれ別の色を設定することができます。
値を3つ設定した場合はそれぞれ「上」「左右」「下」に設定されます。
値を2つ設定した場合はそれぞれ「上下」「左右」に設定されます。
値が1つの場合は全方向同じ色になります。
border-color: #FF0000;
これは要素の周囲に表示される境界線の色を赤色に設定する記述です。また、border-colorは4方向の境界線にそれぞれ別の色を設定することができます。
border-color: red blue green black;
border-color: red blue green;
border-color: red blue;
border-color: red;
値を4つ設定した場合はそれぞれ「上」「右」「下」「左」に設定されます。border-color: red blue green;
border-color: red blue;
border-color: red;
値を3つ設定した場合はそれぞれ「上」「左右」「下」に設定されます。
値を2つ設定した場合はそれぞれ「上下」「左右」に設定されます。
値が1つの場合は全方向同じ色になります。
パラメータの設定
境界線の色
border-top-color: red;
border-top-color: #FF8822;
border-top-color: rgb(255,136,34);
CSSで色を指定する具体的な方法は下記のページにてまとめて解説しています。border-top-color: #FF8822;
border-top-color: rgb(255,136,34);
■ CSSで色を設定する方法
利用例
色を1つ指定した場合
border-color: red;
border-style: solid;
border-width: 10px;
border-style: solid;
border-width: 10px;
■ 表示される内容
1つだけ指定した場合は全方向すべて同じ色になります。
色を2つ指定した場合
border-color: red blue;
border-style: solid;
border-width: 10px;
border-style: solid;
border-width: 10px;
■ 表示される内容
2つ指定した場合はそれぞれ「上下」「左右」の色になります。
色を3つ指定した場合
border-color: red blue green;
border-style: solid;
border-width: 10px;
border-style: solid;
border-width: 10px;
■ 表示される内容
3つ指定した場合はそれぞれ「上」「左右」「下」の色になります。
色を4つ指定した場合
border-color: red blue green black;
border-style: solid;
border-width: 10px;
border-style: solid;
border-width: 10px;
■ 表示される内容
4つ指定した場合はそれぞれ「上」「右」「下」「左」の色になります。