Create a Gradient Border

Trick to Create a Gradient Border 😜

This is pretty easy. It will just take 5 minutes😄

STEP 1:

- Create your element around which you want to create gradient border

In this example I have a sqaure around which I'll create gradient border

STEP 2:

- Create pseudo-element with little extra height and width

Let's say if my sqaure height width is 300px then I'll set 304px height and width of pseudo-element.

STEP 3:

- Set gradient background of pseudo-element and place it at center

I hope now you get the trick😉 If you continue reading👇

STEP 4:

- Add z-index to pseudo-element and send it behind the actual element

That's all❤️

Wasn't it easy and quick? 🤩

Thanks for reading this🙏😊