如何将线性渐变应用于输入边框？

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" /> 

Answer 2

I see that the original answer provides no way to set a border radius. You can pull this off with a weird combination of esoteric CSS elements:

input {
  padding: 0.5rem;
  border: double 3px transparent;
  border-radius: 6px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, orange, yellow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

What this effectively does is create layered gradients. The inner one (the bit that fits within the element) is just white, so it doesn't appear to be anything unusual. Then around that, you add the actual gradient that you want (this can be as complicated or simple as you like).

Finally, you set a transparent border (with the relevant border-radius to get your curved corners), before clipping the backgrounds to the relevant areas. The first background (the white one) gets clipped to the padding-box, which means it takes up all the space of the content

• padding. Then the second background (the one we want as a border) gets clipped to the edge of the border itself.

So our gradient is effectively covered up by a second, white background, apart from the border. You can therefore adjust the size of the border to whatever thickness you want, and the gradient will fill it.

Original source: https://theadhocracy.co.uk/wrote/gradient-borders-with-rounded-corners-on-input-fields