CSS shapes make a differenсe in your design. But what if we say that you can do even more? Do you know how to make gradient borders in CSS? We’ll teach you!
If you hate the idea of a wrapping element, you could use a pseudo-element, as long as a negative z-index value is OK. You could even place individual sides as skinny pseudo-element rectangles if you didn’t need all four sides. But don’t totally forget about border-image, perhaps the most obtuse CSS property of all time. You can use it to get gradient borders even on individual sides. Using both border-image and border-image-slice is probably the easiest possible syntax for a gradient border, it’s just incompatible with border-radius.
If you need a gradient border around an element, 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.
Explore how it all works here.
By the way, here you can find a comparison of CSS Grid vs. Flexbox!
