CODEWITHSUNDEEP
cssfirefoxbordergradient
Nubtacular
Nubtacular

Reputation: 1397

CSS: Trouble with gradient on just right side of background image

This has to apply to Firefox only.

Currently the CSS is:

.statusoverbutton>button{
    background:url(../html/my-bg.png);
    width:242px;
    height:54px;
    border:0;
    float:left;
    color:#a97a30;
    font-size: 16px;
}

The goal: I'm trying to add a gradient ONLY to the right border of the background image. Been toying with the CSS below, which I generated from here http://www.colorzilla.com/gradient-editor/ :

border-image-right: -moz-linear-gradient(top, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%);

What is the correct way to do this?

Upvotes: 0

Views: 105

Answers (1)

vals
vals

Reputation: 64254

The correct way to do it is

border-image-slice: 0% 100% 0% 0%;
border-image-width: 0em 4em 0em 0em;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: linear-gradient(90deg, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%);

but, as GCyrillus says, it will work in Chrome and IE, but not on FF

It will work in FF if border-image-source is an image (a file image, I mean)

Your way (right now) would be having 2 different backgrounds.

Upvotes: 1

Related Questions