border-color:要素の外枠として表示される境界線の色を指定する

初期値 currentcolor
適用対象 全ての要素、::first-letter
継承 しない
アニメーション <color>値
対応ブラウザ caniuseで確認

border-colorプロパティの説明

border-colorは、要素の外周に表示される境界線の色を指定します。上下左右の境界線の色を一括で指定できますが、各辺の値を半角スペースで区切って個別に変更することもできます。

border-colorは、border-top-colorborder-right-colorborder-bottom-colorborder-left-colorの値を含むショートハンド・プロパティです。境界線の種類や太さを一括で指定したい場合は、borderを参照して下さい。

border-colorに指定できる値

<color>
CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値はcurrentcolorです。詳細を以下に示します。
キーワード値
特定の色を表すキーワードです。例えば、赤はred、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。
currentColor
要素のcolorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。
16進数値
16進数の文字列(0〜9, A〜F)を使った表記です。先頭にシャープ(#)を置き、6桁または3桁で表現します。透明度を表す場合はアルファチャネルを追加し、8桁または4桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。
RBG値
光の三原色(赤、青、緑)の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はrgb()またはrgba()です。
HSL値
色相(H)、彩度(S)、明度(L)の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はhsl()またはhsla()です。
システム色
ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。

border-colorの使い方とサンプル

border-colorプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
border-color: cyan;
border-color: magenta;
border-color: yellow;
border-color: black;

/* 16進数値 */
border-color: #ffffff;    /* 不透過 */
border-color: #fff;       /* 不透過の短縮形 */
border-color: #ffffffaa;  /* アルファ値の追加 */
border-color: #fffa;      /* アルファ付きの短縮形 */

/* RGB 値 */
border-color: rgb(255, 255, 255);  /* 不透過の白 */
border-color: rgba(0, 0, 0, 0.5);  /* 半透明の黒 */

/* HSL 値 */
border-color: hsl(240, 100%, 50%);  /* 不透過の青 */
border-color: hsla(0, 0%, 25%, .5); /* 半透明の灰色 */

/* 特殊なキーワード値 */
border-color: currentcolor;
border-color: transparent;

/* グローバル値 */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: unset;

border-colorの実例

それでは簡単な例を見てみましょう。ここでは、borderで要素に共通のスタイルを与え、その色だけを上書きした時の挙動を確かめます。

表示確認
CSS
.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	border: 5px solid;
}
#border_1 {
	border-color: cyan;
}
#border_2 {
	border-color: cyan magenta;
}
#border_3 {
	border-color: cyan magenta yellow;
}
#border_4 {
	border-color: #08f #04c #004 #004;
}
HTML
<section class="samp_box">
	<p>border-color</p>
	<div id="border_1">cyan</div>
	<div id="border_2">cyan magenta</div>
	<div id="border_3">cyan magenta yellow</div>
	<div id="border_4">#08f #04c #004 #004</div>
</section>

border-colorに関連するCSSプロパティ

ボーダー・アウトライン
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-collapse 表のセル同士が隣接する境界線を共有するか分離するかを指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-spacing 表に含まれるセル同士の間隔を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する