The CSS currentColor keyword lets you reuse an element’s text color for borders, outlines, shadows, and SVG paints—making UI theming simpler and more consistent.
currentColor は「その要素の color（文字色）と同じ色」を、他の色指定にも使い回すためのキーワードです。
currentColor が「どの色」を指すのか（color との関係）を説明できるborder / outline / box-shadow / background などで、色を一か所に集約して書けるfill/stroke）を color 1つで着色する考え方が分かる:focus-visible）で安全に使う判断ができるcurrentColor と inherit の違い」などのひっかけを整理できるcurrentColor って何？ざっくり言うと、currentColor は「この要素の文字色（color）を、そのまま“共通の色”として使うスイッチ」です。
color を変えるだけで、枠線やアイコンも追従）currentColor は、要素の color プロパティの値を、他の“色を受け取るプロパティ”にも使い回すためのキーワードです。つまり、color を“基準色（前景色）”として扱い、枠線や影、装飾、SVGの塗りなどに同じ色を流し込めます。
currentColor は「値（キーワード）」なので、色を受け取れる場所なら基本的に使えます。例：border-color、outline-color、background-color、box-shadow の色、SVGの fill/stroke など。
color を変えるだけで、子要素の装飾色（枠線など）もまとめて変えるcolor で着色する（fill="currentColor" など）currentColor 自体で“色を決める”こと（色の元は常に color）color が意図通りでないのに「currentColor だけ直せば解決」すること（まず color を疑う）currentColor は色の値なので、基本的に レイアウト（幅・高さ・配置）には影響しません。ただし、色が変わることで“見え方”が変わり、境界が目立つ/目立たないは起きます。box-shadow を濃く大きくすると重くなる、などは別問題として起きます。padding やサイズで確保します。CSS
.btn {
color: #1d4ed8;
border: 2px solid currentColor;
}border の色を currentColor にすると、color を変えたときに枠線も一緒に変わります。「色を変える入口」を color 1つに寄せられます。
border-color: currentColor; / border: 2px solid currentColor;:focus-visible { box-shadow: 0 0 0 4px currentColor; } のように「外側に広げるリング」を作るfill="currentColor" / stroke="currentColor" を使い、親の color でまとめて着色するcurrentColor 自体に透明度は足せないので、color-mix() などを使うか（対応状況に注意）、別の色指定に分ける<style>style="color: ..." は検証には便利ですが、運用では保守が難しくなりやすいので最後の手段に寄せます。デモは「悪い例 → 良い例」で、差が一目で分かるようにします。
悪い例：同じ色を何度も直書き
色変更のたびに複数箇所を直すことになり、漏れやすい。
良い例：color に集約 → currentColor で追従
色を変える入口は color だけ。枠線・アイコンがまとめて追従。
テーマ切替のイメージ：親の color を変える
青テーマ：このブロックの color が基準
オレンジテーマ：親の color を変えただけ
“色の入口”を親に寄せると、部品の使い回しが楽になります。
フォーカス例：キーボード移動でフォーカスが当たるときだけ、currentColor でリングを出します（:focus-visible）。
ホバー例：動きは控えめに。動きを減らす設定の人にはアニメを切ります。
落とし穴の予告：currentColor が“意図しない色”になるのは、だいたい color が想定と違うのが原因です（次の章で整理）。
HTML
<button class="btn">Button</button>
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="..."></path>
</svg>CSS
.btn {
color: #1d4ed8;
border: 2px solid currentColor;
}
.btn:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 4px currentColor;
}currentColor はプロパティではなく「値」なので、“currentColor が継承する”というより、color が継承すると考えます。親の color を子が継承していれば、子の currentColor も同じ色になります。currentColor の元になる color の初期値は、仕様上はシステム色（例：CanvasText）として定義されます。つまり「既定の文字色」が基準になり、環境（UA/テーマ）で見え方が変わり得ます。border-color / outline-color / text-decoration-color / box-shadow の色 / background-color / SVGの fill / stroke などです。currentColor 自体は色なので、% の基準のような話は基本的に関係しません（長さやレイアウトの計算とは別の話です）。currentColor の“実際の色”は、最終的に決まった color（算出された値）に置き換えられます。DevTools の Computed で color を確認し、その色が border-color などに反映されているかを見ると切り分けが速いです。border: 2px solid; のように色を省略すると、既定で currentColor 相当になるケースがあります（仕様や実装の範囲で）。「省略で揃う」場面もありますが、意図を明確にするなら currentColor と書く方が安全です。currentColor 自体をアニメーションするのではなく、対象プロパティが色としてアニメ可能なら、color を変えたときに連動して見た目が変わります。フォーカスやホバーで color を変える設計は分かりやすい一方、動きは控えめにします。color: currentColorcurrentColor を color 自体に指定すると、color: inherit と同じ扱いになります。「自分の color を参照して無限ループ」になるのを避けるための仕様です。currentColor と inheritinherit は「そのプロパティの値を親から引き継ぐ」という指定です。一方 currentColor は「その要素の color と同じ色にする」という指定です。
border-color: inherit; → 親要素の border-color を引き継ぐborder-color: currentColor; → 自分の color と同じ色にするcurrentColor とカスタムプロパティ（var(--x)）カスタムプロパティは「自分で作る変数」です。currentColor は「すでにある color の最終値」を参照するキーワードです。
currentColor が得意リンクの既定色（UAスタイル）に頼って currentColor を使うと、親の color や状態（未訪問/訪問済み）で意図せず色が変わります。部品として再利用するなら、color の入口を明示しておく方が安全です。
color を部品のテーマ色として持ち、枠線やアイコンは currentColor にして追従させます。デザイン変更で「テーマ色が変わる」場合も、直す箇所が減ります。
currentColor で染めるSVGの path に fill="currentColor" を入れておくと、アイコンの色が文字色に追従します。ナビのアイコン、ボタンのアイコン、アラートのアイコンなどで使い回しやすいです。
注意：SVG側に固定色（fill="#000" など）が書かれていると、CSSで変えにくくなります。
:focus-visible のリング色を currentColor にすると、「危険（赤）」「安全（青）」など部品のテーマに合わせてフォーカス表現を揃えられます。ただし視認性は必ず確認します。
color が想定と違うcolor を確認します。親からの継承、リンクの既定色、状態（:visited など）、テーマクラスの付け忘れを疑います。fill/stroke が #... のままだと、currentColor に置き換えない限り色が変わりません。DevTools でSVG要素の属性とスタイルを確認します。outline を併用する）方向で調整します。border-color や box-shadow が打ち消されていないか確認します。特にリセットCSSやコンポーネントの状態クラスで border: none 等が当たっているケースがあります。currentColor を使うとリング色が部品に追従しますが、部品の色が薄いとリングも薄くなります。リングは“見えないと意味がない”ので、必要ならリングだけ別色にする/太くする/二重にするなどで調整します。
:focus-visible を使い、キーボード操作時に見失わない表示を用意するcurrentColor で揃えると“薄い色”がそのまま枠線/リングにも来る。背景と同化していないか確認するprefers-reduced-motion でアニメを切るcolorcurrentColor の“元”です。どの要素で color を決めるか（親で決める/部品で決める）が設計の肝になります。border / outline / box-shadowoutline はフォーカスの王道で、box-shadow は馴染ませやすい一方、薄いと見落とされやすいです。:hover / :focus-visiblecolor を変えると、currentColor が連動します。状態による“色の意味”があるUIでは、連動の強さがメリットにも事故の原因にもなります。fill / strokecurrentColor 化（またはCSSで上書き）を検討します。--themeColor など）currentColor、という使い分けが実務では分かりやすいです。currentColorcolor プロパティの値を表すキーワード。枠線や影など、色を受け取る場所で使える。inheritcomputed value（算出値）:focus-visiblecurrentColor は「color と同じ色」。親の border-color とは無関係border-color: inherit; と border-color: currentColor; は意味が違うcolor: currentColor; は color: inherit; 扱いになるcurrentColor が効かないことがある問題：.card { border-color: currentColor; } と書いた。枠線の色はどの値で決まる？
解説：その要素の color（文字色）で決まります。まず color の最終値を確認します。
問題：border-color: inherit; と border-color: currentColor; の違いを一言で。
解説：inherit は親の border-color を引き継ぐ、currentColor は自分の color と同じ色にする、です。
問題：color: currentColor; は何と同じ扱いになる？
解説：color: inherit; と同じ扱いになります（自分自身参照のループを避けるため）。
問題：SVGアイコンが currentColor で着色できない。まず疑うべきポイントは？
解説：SVGの fill/stroke が固定色になっていないか、対象要素の color が想定通りか、を DevTools で確認します。
問題：フォーカスリングを box-shadow: 0 0 0 4px currentColor; で作った。見えないときの対処は？
解説：背景と同化している可能性が高いです。リングを太く/濃くする、outline を併用する、リングだけ別色にする、などで視認性を上げます。
currentColor はどのプロパティで使えますか？border-color、outline-color、background-color、box-shadow の色、SVGの fill/stroke などです。currentColor を使ったのに、枠線が想定の色になりませんcolor を DevTools の Computed で確認してください。currentColor は必ず color に連動します。currentColor になりませんpath に fill="#..." のような固定色が残っていると効きません。fill="currentColor" にするか、CSSで上書きできる構造になっているか確認します。<a>）に使うと色が勝手に変わりますcolor の入口を明示しておくと安全です。currentColor で半透明の枠線にできますか？currentColor 自体に透明度を足すことはできません。半透明が必要なら、別の色指定（例：rgba()）にするか、対応状況を確認した上で color-mix() などを検討します。color を指定しておらず既定色（システム色）が基準になっているcolor の最終値を見るcolor を明示する
currentColor を書いたのに“効いてない”border: none など）/ 背景と同化して見えないoutline）を調整する
fill="#..."/stroke="#..."）fill/stroke）を見るcurrentColor 化する、またはCSSで上書きできる構造にする
color が薄い / 背景と同化 / outline を消した:focus-visible を強制outline を戻す、リングだけ別色にする
color に寄せ、装飾色は currentColor で追従させるcurrentColor が想定と違うときは、最初に Computed の color を見るinherit と混同しない（currentColor は“自分の color”）fill/stroke を必ず確認する