Here's my jsfiddle: http://jsfiddle.net/9TWHF/1/
#bigdescription{
width: 66%;
border-style: solid;
border-width: 87px 78px 81px 79px;
-moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round;
-webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round;
-o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round;
border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 fill round;
}
Firefox:
Safari:
You can see it best on the bottom border. In every browser but Safari, the bottom border rounds correctly. In Safari, it doesn't seem to be rounding at all. Any ideas why it's happening?
Edit: as far as I can tell, Safari doesn't actually support the "round" repeat style on border-image (even though their docs says that they do https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html)
This appears to be a Safari bug. It does the same thing here, even with their sample image. It appears the only way to get consistent results is with fixed width for Safari...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With