CODEWITHSUNDEEP
csssafari
Frederik Witte
Frederik Witte

Reputation: 1345

Border-image in Safari cutting image?

I have a border-image and its working fine, but not in safari.

In Google Chrome:

Chrome:

In Safari:

Screenshot from iPad

As you can see, the border-image is cut in safari. Any suggestions? The Css code:

border:40px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 round;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 round;
border-left:0;
border-right:0;
border-bottom:0;
width:500px;
height:100px;
margin-top:100px;
background-color:white;

Upvotes: 0

Views: 536

Answers (1)

Treebeard
Treebeard

Reputation: 26

The post below has some good info about the border-image problem in Safari:

border-image rounding not rounding correctly in Safari

In short, I don't think Safari really supports the 'round' property and instead defaults to 'repeat'.

One possible solution is to use an image that is the exact size you want your top border to be. For example, if you want the top border to be exactly 500px wide and 40px high, then make the image "ruler.png" exactly that size.

Upvotes: 1

Related Questions