Rounding off rounding not rounded correctly in Safari

Question

Here is 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 lower border. In every browser, but Safari, the lower border rounds off correctly. In Safari, it doesn't round at all. Any ideas why this is happening?

Edit: as far as I can tell, Safari doesn't actually support the “round” repeat style on the border image (although their docs say they are https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/articles /standardcssproperties.html )

Answer 1

This seems to be a Safari bug. He does the same here , even with their pattern. It seems the only way to get consistent results is with a fixed width for Safari ...

Answer 2

This is the closest that I can make it look right and smooth.

 #bigdescription{ width: 353px; border-style: solid; border-width: 87px 64px 76px 89px; -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; } 

I changed part of the width: and border round properties

Answer 3

Adding to the answer @ Piyush-Marvaniya

This is due to pixel rounding errors due to the percentage width. When fixed, you get a border similar to other browsers.

Here is a working example in Saf v5.0 (7533.16) / Win on jsfiddle . I was able to make it almost perfect, there is one pixel glitch in the lower boundary curve, but you need to understand it very carefully:

 #bigdescription { width: 350px; border-style: solid; border-width: 87px 69px 76px 89px; -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; } 

Answer 4

Try this css

 #bigdescription{ width: 66%; border-style: solid; border-width: 87px 69px 77px 89px; -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 fill round; }