Martin Ma Martin Ma - 20 days ago 7
HTML Question

css3 border-image not working in Safari

I have tried to implement an "envelope border" effect on my page.

Basically, it's the same as this in codepen:

http://codepen.io/danichk/pen/KdorYJ




.box {
padding: 1em;
border: 16px solid transparent;<br>
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}





But it doesn't work in safari. And I also found that even the example of 'border-image' in w3schools seems not working. Which already consider multi-browser supported.

http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3

In fact, I have also tried compass to generate a "multi-browser" friendly css as below:

compass:

$envelop-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
.envelope-border {
padding: 1em;
border: 16px solid transparent;
@include border-image($value: $envelop-border-image);
}


css

.envelope-border {
padding: 1em;
border: 16px solid transparent;
-moz-border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-moz-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-o-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-webkit-border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-webkit-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
}


Does anybody have any idea about it? Many thanks.

My Safari version is: Version 10.0.1 (12602.2.14.0.7)

Answer

Try

border-width: 16px;

for the .box class.

Webkit has a bug with border-style and border-width. If no definition of border-style will show border-image. So you only need border-width

.box {
    padding: 1em;
    border-width: 16px;
    border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;

  }

Comments