CSS: Get border color from element itself

Question

How could I get the color of the element itself via CSS? I wanted to have the same border color as the color of the text itself.

Example HTML:

<span class="status-name" style="color:#ff0000">Max</span>

CSS:

.status-name {
    font-weight: bold;
    border-bottom: 1px solid ???;
}

The bottom border should have the color #ff0000 now. I tried inherit, auto or even attr(data-color) (in combination with a data-color="#ff0000" attribute) but all makes the rule invalid for the browsers.

Please note that I need to solve this problem if possible via CSS because there are some thousands elements on the page with such classes and it's accessed mainly by mobile phones. Also I know that setting CSS via style is not state of the art but there are hundreds of different color values and it's not reasonable to create for each color an own CSS class, isn't it?

Answer 1

By default borders inherit the color propertie of the box so set no color on the CSS declaration:

border-bottom: 1px solid;

Answer 2

Try this:

.status-name {
    font-weight: bold;
    border-bottom: 1px solid;
}

it will automatically inherit the color