Bottom Gradient Border

Question

According to CSS Tricks, the following CSS syntax would result in left border gradient.

.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;   
}

I'm trying to get the border gradient on the bottom of the element.

I tried changing this

    border-width:3px 0 3px 3px;

to this

border-width:0 0 3px 0;

this

border-width:0 3px 3px 3px;

And it doesn't work, can anybody help me with getting that bottom border to work?

You may need a WebKit browser to do this.

Here would be a fiddle for one to work with; http://jsfiddle.net/HsTcf/

Thanks.

Answer 1

Here is another way that works for bottom borders. This is the complete class declaration from a site example.

#header_bg {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 121px;
    top: 0px;
    background-color: #fff;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}

<div id="header_bg"></div>

I am assuming above you are trying to make a fixed header. The most important part of course is the box-shadow property. This will work in most modern browsers as well.

Answer 2

border-width: 0 0 3px 0;

is correct.

However, the following changed needed to be made:

... -gradient(right, ...

needed to be changed to

... -gradient(top, ...

and 1 100%; to 100% 1;.

Demo: jsfiddle.net/HsTcf/3