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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With