border-color
border-colorは、枠線の色を指定するスタイルです。
解説
指定した枠線の色をカラーネームやカラーコードなどで指定します。
border-colorには枠線の上下左右それぞれの色を指定できます。
- 色を１つ指定した時：指定した色が上下左右に適用されます。
- 色を２つ指定した時：１つ目が上下、２つ目が左右に適用されます。
- 色を３つ指定した時：１つ目が上、２つ目が左右、３つ目が下に適用されます。
- 色を４つ指定した時：１つ目が上、２つ目が右、３つ目が下、４つ目が左に適用されます。
構文
構文は以下になります。
border-color: 値1;
border-color: 値1 値2;
border-color: 値1 値2 値3;
border-color: 値1 値2 値3 値4;
値
border-colorには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| カラーネーム | カラーネームで指定する （例）青色を名称で指定する ⇒ border-color:blue; |
| カラーコード | カラーコードで指定する （例）青色をコードで指定する ⇒ border-color:#0000ff; |
| RGB値 | RGB値で指定する （例）青色をRGB値で指定する ⇒ border-color:rgb(0, 0, 255); |
| RGBA値 | RGBA値で指定する （例）青色、透過率0.8を指定する ⇒ border-color:rgba(0, 0, 255, 0.8); ※透過率は0.0(透明)～1.0(不透明)で指定します。 |
| transparent | 透明を指定する（初期値） （例）border-color:transparent; |
太字の値は初期値です。
サンプル
枠線を青色にする
.sample01 {
border-style:solid;
border-color:blue;
}
<div class="sample01">border-color:blue;</div>
border-color:blue;
枠線の上下を青色、左右を赤色にする
.sample02 {
border-style:solid;
border-color:blue red;
}
<div class="sample02">border-color:blue red;</div>
border-color:blue red;
枠線の上を青色、左右を赤色、下を緑色にする
.sample03 {
border-style:solid;
border-color:blue red green;
}
<div class="sample03">border-color:blue red green;</div>
border-color:blue red green;
枠線の上を青色、右を赤色、下を緑色、左を黄色にする
.sample04 {
border-style:solid;
border-color:blue red green yellow;
}
<div class="sample04">border-color:blue red green yellow;</div>
border-color:blue red green yellow;
備考
- カラーネームについては以下ページをご覧ください。
⇒ カラーネーム一覧
関連項目
- border：枠線に関するスタイルをまとめて指定する
- border-color：枠線の色を指定する
- border-radius：枠線の角の丸みを指定する
- border-style：枠線のスタイルを指定する
- border-width：枠線の太さを指定する
