webデザインにおけるCSSの色の識別子として、色キーワード（ほぼ色ネームと同意）があります。例えば、16進数表記で「#8A2BE2」、10進RGB表記で「138,43,226」という色は、「blueviolet」という色キーワードで表すことができます。色キーワードは、16進や10進の数値だけの色コードとは違い、色味を連想しやすい英文単語で特定の色を指定することができます。また、大文字と小文字の区別はありません。

色キーワードを使った具体的な例

  div. example {
        color: blueviolet;
        border: 1px solid blueviolet;
        }

この色キーワードと同様の使い方で、デフォルトでは継承を行わない子要素のプロパティに色を継承させることができるのが、「currentcolorキーワード」です。

サンプルについて：　colorプロパティの値は継承されるので、子要素のcolorプロパティの値を指定しないことで自動継承させ、その値を元に「border-color:currentcolor」により、子要素のborder-colorプロパティに継承させています（親要素のcolorプロパティの値=子要素のborder-colorプロパティの値）。

サンプル

サンプルのhtmlソース

 <div class="perent">
     親要素（color : blueviolet）
     <div class="child">
         子要素
         <span>（colorとborder-colorに継承）</span>
     </div>
 </div>

サンプルのCSSコード

.perent {
	width: 96%;
	padding: 15px;
	margin: 10px auto;
	border: 1px solid green;
	color:  blueviolet;
	}
.child {
	padding: 10px;
	border-style: solid;
	border-width: 2px;
	border-color: currentcolor;   // 親要素のcolorを継承
	}
.child span {	
	color: #444;
	}