border image not showing in safari

css, html, safari

Solution

I found this post while looking for a solution for the same problem with Safari 10.0. I was able to find a solution and wanted to share it in case somebody has the same problem. The problem was fixed by removing the border shorthand property and replacing it with border-style and border-width.

Here is my code before, NOT working:

 .borderWrap{

    border: solid 34px transparent;
    border-image: url(../images/spriteOneFrame.png) 34 34 round;
 }

And the new code working:

.borderWrap{

    border-style: solid;
    border-width: 34px;
    border-image: url(../images/spriteOneFrame.png) 34 34 round;
}

Problem

border-image not showing up in Safari or on tablet and mobile devices. It's fine in FF, IE, Chrome and Opera. Here's the HTML: ``` <div class="col-sm-4 ctas" id="togglelinks"> <div class="rooms"> <img src="images/bedroom1.jpg" alt="" class="img-responsive" /> <h6>Room 1</h6> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p> <p><a class="btn togglee" target="one">MORE INFORMATION</a></p> </div> </div> ``` and the css ``` .rooms { border: 15px solid transparent; color: #fff; padding: 5px; border-image: url("../images/paint-blk.png") fill 21 repeat; } ``` A little more information: I'm using Bootstrap v3.0.3. The page is validating. In FireBug the borders are being brought through, colour, padding, but not the image.

Original source