CSS gradient gradient graphic doesn't work in Safari 10

Question

I ran into a problem with image gradients on the border of Safari 10 and CSS. It works in all other browsers, and even in Safari 9. It even appears in Safari 10 in online simulations. See the images below:

(I think IE 11, not IE 10. Thanks for the fix!)

I assumed that it was just my CSS, so I really simplified it and made a violin. You can see it at https://jsfiddle.net/tgbuxkee/

It is also generated below.

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>

Run codeHide result

Does anyone have any idea why this might happen? I know that there is a bug with some image borders in Safari, but I don’t think it is (maybe it is)

And the recommendations are helpful.

Thank.

Answer 1

- , border-color: transparent . , .

, Safari 10 Mac . border-width border-style . .

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

: IE10 , border-image , .

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>

Hide result

Answer 2

. - Safari 11 ( ), , border-image: url Safari (v11) , , -webkit -, :

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;
}

, , -.