CODEWITHSUNDEEP
htmlcsssafaricompass-sassborder-image
Martin Ma
Martin Ma

Reputation: 75

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)

Upvotes: 1

Views: 1369

Answers (2)

hoangkianh
hoangkianh

Reputation: 649

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;

  }

Upvotes: 1

Martin Ma
Martin Ma

Reputation: 75

it seems can be solved by this little trick.

.envelope-border {
  padding: 0;
  border: 16px solid transparent;
  -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);
}

.content {
  background: white;
  padding: 1em;
}

html

<div class="envelope-border">
  <div class="content"><div>
</div>

Upvotes: 0

Related Questions