Gradient borders with rounded corners on input fields

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:

Searchbox with an orange-yellow gradient border with rounded edges.
If the search box on theAdhocracy is still using this style, check out what happens when you start searching to see how cool this effect can be 😉

Explore Other Articles

Further Reading & Sources

Conversation

Want to take part?

Comments are powered by Webmentions; if you know what that means, do your thing 👍

  • <p>Whilst putting together my new search page I ran into a problem: styling an input box so that it had a gradient border and rounded corners. Turns out there's a hack for that.</p>
  • Murray Champernowne.
Article permalink