Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

border-image rounding not rounding correctly in Safari

Tags:

css

safari

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: enter image description here

Safari: enter image description here

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)

like image 610
user688518 Avatar asked Jan 27 '14 20:01

user688518


1 Answers

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...

like image 78
Jason Lydon Avatar answered Oct 07 '22 17:10

Jason Lydon