How to apply linear-gradient to input border?

Question

Is it possible to to apply a linear-gradient color to input border?
I've tried the following:

input{
    border: 5pt solid linear-gradient(rgba(0, 25, 50, 0.5), rgba(0, 0, 25, 0.5));
}

The problem with the code above is that you can't use linear-gradient as a color.
Just clarifying, I don't want to change the input background color, only border color.

JSFIDDLE:
http://jsfiddle.net/o1yhod9t/

Answer 1

You cannot directly add a gradient to the border property as the third parameter only takes a color. Instead you would have to use the border-image property like in the below snippet.

Note that the browser support for this property is pretty low at present. For better browser support, the same could mimicked using background-image property.

input {
  border-image-source: linear-gradient(rgba(0, 51, 102, 0.5), rgba(0, 0, 51, 0.5));
  border-width: 5pt;
  border-image-slice: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" />