currentColor & inherit

Two CSS keywords help you write DRY colour code by referencing colours that are already defined elsewhere.

currentColor

currentColor is a dynamic value that equals the element's current color property. It works in any property that accepts a colour value: border, box-shadow, fill, stroke, background, etc.

inherit

inherit forces a property to use the same computed value as its parent. Colour properties like color inherit naturally, but others such as border-color and background-color do not — inherit makes them do so explicitly.

Practical Uses

Icons that automatically match their surrounding text colour, borders that shift with a theme, and focus rings that match link colour are all clean currentColor use-cases.

Example

/* Icon inherits text colour automatically */
.icon {
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Border matches link colour without repeating the value */
a.fancy-link {
    color: #1a73e8;
    border-bottom: 2px solid currentColor;
    text-decoration: none;
}
a.fancy-link:hover {
    color: #b31412; /* border colour changes automatically */
}

/* Box shadow using currentColor for cohesion */
.badge {
    color: hsl(142 71% 35%);
    border: 1px solid currentColor;
    box-shadow: 0 0 0 3px hsl(142 71% 35% / 0.2);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Force a non-inheriting property to inherit */
.child-border {
    border-color: inherit;
}

CSS

Full Editor

Pro Tip

Use currentColor for inline SVG icons — set the icon's fill or stroke to currentColor and control the colour from a single color declaration on a parent element.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned