CODEWITHSUNDEEP
csssafari
Ralphatron
Ralphatron

Reputation: 63

CSS border-image:linear-gradient not working in Safari

I've got a little CSS square bracket thing going on. It works nicely in Chrome, Firefox, and oddly in IE, but not in Safari!

.square-brackets {
padding: 10px 30px;
margin: auto;
border: 5px solid transparent;
border-image:linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%);
border-image: -webkit-linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%); /* Chrome10+,Safari5.1+ */
border-image-slice: 1;
}

Does anyone know what might be causing it not to render in Safari?

Upvotes: 0

Views: 830

Answers (2)

Ralphatron
Ralphatron

Reputation: 63

OK, so it works in the latest Safari browsers. The latest Safari I can load onto my PC is ancient. I didn't realise Apple didn't offer newer versions for Windows any more!!

Upvotes: 0

margarita
margarita

Reputation: 894

You need to use this for backwards compatability:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7)));

Basically, you need to use both -webkit-gradient and -webkit--linear-gradient. You can find more information about gradient prefixes here: https://github.com/CSSLint/csslint/wiki/Require-all-gradient-definitions

Upvotes: 1

Related Questions