Gradient Borders in CSS

Let’s say you need a gradient border around an element. My mind goes like this:

There is no simple obvious CSS API for this.
I’ll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it.

Perhaps like this:
See the Pen Gradient with Wrapper by Chris Coyier (@chriscoyier) on CodePen.

If you hate the idea of a wrapping element, …
The post Gradient Borders in CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/gradient-borders-in-css/