border-color fails with inherit value

Question

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?

Answer 1

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>

Answer 2

After some googling it looks like the CSS inherit keyword is all-or-nothing, so it can't be used in shorthand. The results you're getting reflect the inconsistent interpretation of an 'invalid' rule.

See also: this discussion.

You should be able to override the specific properties you want to inherit though, as long as your rule declarations are all valid. IE instead of:

border-color: inherit transparent;

You should use:

border-color-left: transparent;
border-color-right: transparent;

Unfortunately I don't think you can make it any shorter than that.