I've recently found an issue with border color.
border-color: inherit //work
border-color: inherit transparent //fail
border-color: transparent inherit //work
border-color: inherit transparent transparent //fail
border-color: inherit transparent transparent transparent //fail
Why do these "first value inherit" border-color fail?
It fails because according to the definition of border-color, the keyword inherit is allowed only as the value of the property by itself, not as a component together with other values. This is what the description
[ <color> | transparent ]{1,4} | inherit
means: you can have one to four components, each of which is either a color designation or the keyword transparen, or inherit as such.
There is an Opera bug involved, but the bug is that the value transparent inherit (and transparent transparent inherit) “works”, i.e. does what you mean, instead of doing what it must do by the specifications. According to CSS error processing rules, the declaration must be ignored when the value is syntactically malformed. (Chrome shares this bug with Opera, but Firefox and IE do the right thing.)
For example, to achieve what you mean by border-color: transparent inherit (namely setting top and bottom border color transparent, left and right border color inherited), you need to set individual border components one way or another in separate declarations, e.g.
div { border-color: red }
span {
border-style: solid;
border-color: transparent;
border-left-color: inherit;
border-right-color: inherit;
}<div>
<span>Hello world</span>
</div>