currentColor
currentColor reuses the current value of the color property in other CSS properties. It helps align borders, icons, shadows, and decorative details with the current text color.
Overview
currentColor reuses the current value of the color property in other CSS properties. It helps align borders, icons, shadows, and decorative details with the current text color.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.color.currentcolor | 1 | 12 | 1.5 | 4 | 18 | 3.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.icon-button {
color: #3b82f6;
border: 2px solid currentColor;
fill: currentColor;
}Live demo
Use cases
Color-synced decorations
Match borders, SVG strokes, or outlines to the current text color without duplicate declarations.
Theme-aware components
Let reusable components inherit and reuse the surrounding foreground color automatically.
Cautions
- Implicit color coupling can become surprising if a parent text color changes unexpectedly.
- Use it intentionally so the relationship between text and decoration remains meaningful.
Accessibility
- Shared color tokens can improve consistency, but contrast should still be checked for every property that inherits currentColor.
Related links
Powered by web-features