I'm trying to apply a gradient to a border, I thought it was as simple as doing this:
border-color: -moz-linear-gradient(top, #555555, #111111);
But this does not work.
Does anyone know what is the correct way to do border gradients?
I'm trying to apply a gradient to a border, I thought it was as simple as doing this:
border-color: -moz-linear-gradient(top, #555555, #111111);
But this does not work.
Does anyone know what is the correct way to do border gradients?
Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.
Firefox claims to support gradients in two ways:
IE9 has no support.
instead of borders, I would use background gradients and padding. same look, but much easier, more supported.
a simple example:
CSS:
JsFiddle
EDIT: You can also leverage the
:before
selector as @WalterSchwarz pointed out in this jsFiddletry this code
or maybe refer to this fiddle: http://jsfiddle.net/necolas/vqnk9/
Here's a nice semi cross-browser way to have gradient borders that fade out half way down. Simply by setting the color-stop to
rgba(0, 0, 0, 0)
Usage explained:
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Try this, works fine on web-kit
http://jsfiddle.net/284sa/
Try this, it worked for me.
The link is to the fiddle https://jsfiddle.net/yash009/kayjqve3/1/ hope this helps