Safari vs Chrome/Firefox: border-image vs border-color

Question

Safari treats border-color:transparent as overriding border-image, whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as transparent. I don't know what IE does.) Concretely, this snippet:

#wrapper { background-color: red; }
#test {
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>

draws a light blue border around the div in Chrome and Firefox, but a red border in Safari.

Questions:

1. Which behavior is correct?
2. Is there any way to force Safari to behave like Chrome and Firefox?

Note: I've only tested the above example with Safari 10.0 (11602.1.50.0.10), Firefox 48.0.2, and Chrome 53.0.2785.116 (all on OSX 10.11) but the website it's cut down from has exhibited the same behavior consistently for at least a year, so I do not believe this is particularly version-specific.

Note 2: border-color:transparent is present for the sake of browsers that don't support border-image. (For instance, I do still care about IE 7 through 10 for the real website this is cut down from.) Proposed solutions should show the background of the wrapper, not a visible border, in browsers that don't support border-image.

Answer 1

Here's how you get around that bug:

Instead of

border-color:transparent;

use

border-color:transparent; border-color:initial;

As you discovered, Safari does have a bug related to border-color:transparent, but adding border-color:initial afterwards gets around that bug in Safari, and doesn't cause any additional problems in other browsers that support border-image.

For browsers that don't support border-image (which happens to be just IE <= 10), they happen to also not support the initial value there, so they fall back to border-color:transparent and you don't get a visible border.

Here's the fiddle: https://jsfiddle.net/L78gL7xc/2/

Answer 2

Answers:

Answer 1

Behavior with Chrome and FF is correct behavior.

Answer 2

Remove border-color: transparent.

Or

(Updated answer for IE) use border-color (For support check here - can i use border-color?)

#wrapper { background-color: red; }
#test {
  border-width: 10px;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

#test1 {
  border-width: 10px;
  border-style: solid;
  border-color: cyan;
  background: white;
}

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>

<br>

<div id="wrapper1">
  <div id="test1">Simply use border-color, this property is supported effectively in all browsers.</div>
</div>

Hope this will help you in some way.

Answer 3

I am not sure what you are accepting as correct other than you need the equivalent for the code shown and has good compatibility..

Personally, I do not code my borders as shown. So I simply used the borders how I normally would and that seemed to have the light blue border on MacOS Safari, Chrome, FF, iOS 9, Android and IE 8.

#wrapper { background-color: red; }
#test {
  border: 10px solid transparent;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>