CSS Border Image Gradient Not Working in Safari 10

Question

I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:

(I guess that's IE 11, not IE 10. Thanks for the correction!)

I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at https://jsfiddle.net/tgbuxkee/

It's also generated below too.

div {
  width: 200px;
  height: 200px;
  border: 6px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
    -webkit-border-image-slice: 2;
    border-image-slice: 2;
  
}

<div>

</div>

Does anybody have any idea why this could be happening? I know there is a bug with some image borders in Safari but I don't think that is the case here (maybe it is).

And guidance is helpful.

Thank you.

Answer 1

I have run into this issue in the past and remember reading somewhere on the web that avoiding the border-color: transparent setting would solve the problem. I don't remember where I read about it.

It seems like Safari 10 on Mac gives preference to the transparent border color over the border image and so displays nothing. Just setting the border-width and border-style alone would solve it. This solution works on other supported browsers also.

Tested on Chrome v56 (dev), Safari 10 (Mac), Safari 5 (Windows), Safari (iOS), IE11, Edge, Firefox 47.0.1, Opera 41.

Note: You've quoted IE10 in the question but as far as I know border-image doesn't work in it and so the given solution also doesn't.

div {
  width: 200px;
  height: 200px;
  border-width: 6px;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
  border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
  -webkit-border-image-slice: 2;
  border-image-slice: 2;
}

<div>

</div>

Answer 2

The following may be helpful supplemental information. The accepted answer is still true for Safari 11 (as of posting), but for the record, I have also found that with, border-image:url, Safari(v11) will accept the shorthand border, with transparent, if you list the -webkit- vendor prefix last, like this:

div {
  border:1px solid transparent;
  border-image:url([some-border-image]) 1 0 1 repeat;
  -webkit-border-image:url([some-border-image]) 1 0 1 repeat;
}

Since it is non-standard to list the vendor prefix last, I prefer the accepted answer as most web standards friendly.