Cross browser CSS border gradient

Question

For quite some time now I have been trying to find the solution, but without success. Hopefully someone around here can help me out.

I have come to understand that I will need to use -webkit, -moz, etc in order to get it to work cross browser.

I have successfully found out how to get the -moz syntax right, but I am unable to find the corresponding -webkit syntax.

Also, I have noticed a lot of people prefer background-gradients, but I am unable to reproduce the below, even by using a background-gradient generator.

The border gradient I am talking about is the following:

-moz-border-left-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
-moz-border-right-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;

And the site is going to look like this: http://postimg.org/image/qeonchwpd/

Please ignore the other mistakes that can be seen in that screenshot, as those I can easily fix. It's just the border gradient I can't get to work.

As you can see I am not trying to get a gradient border around a small box, but rather left and right of the entire page! The gradient goes from black, slowly to white and then to black again.

Anyone who can help me get this to work in -webkit browsers and maybe others as well? Suggestions to get it to look better then in the screenshot are always appreciated as well!

Thanks a lot in advance!

So it's just the left and right borders of the main div going from white to black that you are after...right? — Paulie_D, Nov 01 '13 at 13:16

score 1 · Answer 1 · answered Nov 01 '13 at 13:29

Perhaps you should abandon using borders completely and think in terms of background gradient on the entire div.

If you set the div to have padding (say 6%) you can apply a linaer gradient left to right (or back the other way...it doesn't matter) with color stops that end just before that padding finishes.

JSFiddle Demo

HTML

<div class="main"> Any content  </div>

CSS

.main {
    width:75%; /* not required */
    margin:0 auto; /* not required */
    height:1000px; /* not required */
    color:white; /* not required */

    /* the important bits */

    background:linear-gradient(to right, black, white 5%, black 5%, black 95%, white 95%, black);
    padding:6%; ?just a little more than the color stop values)

}

score 0 · Answer 2 · edited May 23 '17 at 11:58

I have not heard about -webkit-border-left-colors. I have only seen border-left-color.

The syntax border-left-color will work in chrome which is a webkit browser. You do not need to append -webkit.

The -moz-border-left-colors: is a property only applicable to mozilla browsers. So there is no webkit alternative for this. Check fiddle http://jsfiddle.net/aWXmr/

EDIT: There are a few alternatives to doing this . You may want to look at this question for possible solutions using CSS3

Cross browser CSS border gradient

2 Answers2