Is the border color of an element affected by its background color?

Question

I am re-studying CSS concepts in W3Schools.

I am quoting what is written in this helpful website:

• Border - A border that goes around the padding and content. The border is affected by the background color of the box

http://www.w3schools.com/css/css_boxmodel.asp

But if I do not specify a color for my border (I am testing with a table), it is not shown.

So what is W3Schools trying to say?

Answer 1

But if I do not specify a color for my border (I am testing with a table), it is not shown.

If you don't specify a border, then there's no border to draw. I don't see how the statement you quoted would be relevant then.

Anyway, on to the actual question at hand...

Is the border color of an element affected by its background color?

It only is if:

• The border isn't completely solid and/or opaque, and

• background-clip is not border-box (it is by default)

If it's a border image with see-through areas, or a semitransparent color (e.g. an rgba() or hsla() color), then the background, if there's one, will be visible underneath the border.

If background-clip is either padding-box or content-box then the border does not even overlap with the background regardless of whether the border is an image or semitransparent color.

These are uncommon scenarios that you have to work to achieve, so I don't know why W3Schools would bother pointing that out. I'm not surprised that W3Schools doesn't bother explaining why it is such a case though. For the record, that site isn't as great as you make it out to be; see comments on your question for why.

Answer 2

If you have a border-color with a alpha value or a transparent color or not solid, the color of the box will shine through.
http://jsfiddle.net/HerrSerker/WrZRL/

div {
    background-color: black;
    border: 10px solid rgba(255,255,0,0.5);
    width: 100px;
    height: 100px;
    margin: 10px;
}
div.d2 {
    background-color: red;
}

Answer 3

Ignoring transparency...

It is possible that on some old browsers the border color (if not explicitly set) is affected by the color of the background for certain border-styles (groove, ridge, inset, outset, etc.). Old versions of Chrome, for instance, displayed an intermediate color based (bizarrely) on the background-color in the corners for beveled border styles - although this was hardly noticeable and was independent of the border-color being set. (This was probably a bug and has been fixed in later versions.)

When the border-style is set to "double", then the background-color is seen inside the border.

However, I feel that w3schools has got it wrong...

The border is affected by the background color of the box.

The color of the element does indeed affect the color of the border when the border-color is not explicitly set. But this is browser dependent and therefore unreliable. In Chrome, the border-color will be the same as the color for dotted, dashed, solid and double border-styles, if not explicitly set.

---

Whether a border is shown at all is primarily dependent on the border-style ("none" or "hidden") and the border-width, not usually the border-color - unless the border color matches the background color, in which case it looks like there is no border.