Border-width: inherit not working

Question

I am trying to have a child accept a border-widthparent.

I reduced my problem to the following code.

.first, .second {
    border-color: red;
    border-width: 5px;
    background: #eee;
}

.first span {
    border-width: 2px;
    border-color: inherit;
    border-style: solid;
}

.second span {
    border-width: inherit;
    border-color: green;
    border-style: solid;
}

<p class="first"><span>'border-color: inherit' works</span></p>
<p class="second"><span>'border-width: inherit' does not work</span></p>

Run codeHide result

As you can see, border-color: inheritworks great for span. But it border-width: inheritdoes not work for the same span.

I tested chrome, firefox, etc.

Jsfiddle demo

Answer 1

Taken from MDN https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

border-bottom-width: absolute length or 0 if border-bottom-style is missing or hidden

, 0. ,