It's the kind of thing which seems simple. You can set a border on an <input> element; you can round corners using border-radius; and you can use border-image to give a border a gradient. But you can't do all three. Sigh.
Or at least, that's what I thought. Turns out you can pull this off with a weird combination of esoteric CSS elements (of course):
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 <input> 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. Neat trick, which I used (subtly) on the site search here:
