Bottom Gradient Border

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.