仕様

border-color<color>{1,4}
一括/個別一括指定プロパティ
初期値currentColor
適用対象 ruby base containers and ruby annotation containers を除くすべての要素
継承なし
百分率なし
計算値currentColor の計算値は currentColor です。基本カラーキーワード、RGB 16進値、および拡張カラーキーワードの計算値は、RGB値の3つ組に相当します。transparent の計算値は、rgba(0,0,0,0)です。他のすべての値の場合、計算値は指定された値です。
補足border-top-color, border-right-color, border-bottom-color, border-left-color も値が１つの個別指定プロパティなだけで他は同じ

border-color プロパティは、要素の境界線の色の上(border-top-color), 右(border-right-color), 下(border-bottom-color), 左(border-left-color) の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

上，右，下，左で一部を初期値などにしたい場合は、
border-top-color, border-right-color, border-bottom-color, border-left-color 等を用います。
値は上，右，下，左に個別の指定で値が１つであるだけで、border-width と同じ規則です。

値の数

  1. cdvSample420 > div { border-style: solid;}
  1. <div class="cdvSample420">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

例
  1. border-color: #ff0000 #00ff00 #0000ff #ff00ff;

値を４つ指定しました。値は 上，右，下，左 で設定されます。

例
  1. border-color: #ff0000 #00ff00 #0000ff;

値を３つ指定しました。値は 上，左右，下 で設定されます。

例
  1. border-color: #ff0000 #00ff00;

値を２つ指定しました。値は 上下，左右 で設定されます。

例
  1. border-color: #ff0000;

値を１つ指定しました。値は 上下左右 で設定されます。

例

<color> 値

  1. cdvSample420 > div { border-style: solid; }
  1. <div class="cdvSample420">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。境界線の線種の指定は、線種の初期値が none でそのままでは境界線がないので記述しています。

例
  1. border-color: red;

色キーワード red を１つ指定しました。red は RGB 16 進表記で #ff0000 です。

例
  1. border-color: #ff0000ff;

RGB 16 進表記 で値を１つ指定しました。#ff0000ff は #ff0000 とも #f00f とも同じです。#ff0000 は下の２桁(ff)の省略で #f00f は短縮形です。

例
  1. border-color: rgba(255,0,0,1.0);

関数表記 で値を１つ指定しました。rgba(255,0,0,1.0) は #ff0000ff と同じです。

例
  1. border-color: transparent;
  2. color: #ff0000;

キーワード transparent を１つ指定しました。transparent は完全な透明色を表すキーワードです。

例
  1. border-color: currentColor;
  2. color: #ff0000;

キーワード currentColor を１つ指定しました。currentColor は前景色(要素の color プロパティの値)を表すキーワードです。currentColor は border-color プロパティの初期値です。

例

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample440 > div { padding: 0.5em; border: solid 0.5em #0000ff; }
  2. cdvSample440 > div > div { border-style: solid; }
  1. <div class="cdvSample440">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

親
子
  1. border-color: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-color: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-color プロパティの初期値は currentColor です。

親
子
  1. border-color: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-color プロパティは非継承プロパティなので初期値の currentColor を設定します。

親
子