How does currentColor let CSS reuse an element’s text color?

The color property sets the text color and establishes that element’s currentColor value. Another color-valued property can use currentColor to refer to that color. [S1] The outline color also accepts currentColor. [S2]

.button {
  color: #2457a7;
  border: 2px solid currentColor;
  outline: 2px solid currentColor;
}

The text, border, and outline here share the button’s color. currentColor supplies the border and outline colors; the example sets their widths and styles separately.

It refers to the color of the element where you use it, not automatically to a particular ancestor. If the button inherits its text color, that inherited value is the button’s applicable color. If the button has its own color declaration, its border or outline using currentColor follows that color instead. [S1]

For example, if a parent sets color: #2457a7 and the button inherits it, the button’s border can follow that color. If the button sets color: #8a2d3c, its border follows the button’s own color. When checking a result, look at the color that applies to the element with the currentColor declaration.

Yes. outline-color accepts currentColor, so you can make an outline use the element’s text color. [S2] For example:

.notice {
  color: #2457a7;
  outline: 2px solid currentColor;
}

If the outline does not look as expected, check which color applies to .notice, including whether it inherits a value. Also check that the outline has a width and style: currentColor provides its color, not those other settings.

Follow the rule from the element outward: find its applicable color, then check that each property you want to coordinate uses currentColor. For example, a border and outline on the same element can each use that value. [S1][S2]

As a practical review, change the element’s color declaration and check whether the border and outline follow. That is a suggestion for reviewing your own page, not a claim that this example has been tested in a particular browser. If one does not follow, check whether that property uses currentColor and whether the element’s applicable color is the one you intended.