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

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.