gradient Borders in CSS

Question

Is there any way I can make the border look like this image:

Answer 1

Not exactly like in the image you provided, but at least similar. In pure CSS its hard to do this since you can't just set the border-color attribute to have a linear or circular gradient. However, you can try to place the image in front of a div with the correct gradient. Another option would be to use border-image, however, I'm not 100% that this is compatible with all browsers out there.

HTML & CSS (Option 1):

<div class="bg"></div>
<img class="img" src="/image.png" alt="image"/>

.bg {
    background: linear-gradient(45deg, orange, red); /* you can freely change all everything in here */
    border-radius: 50px;
    height: 50%; /* to be changed */
    width: 50%; /* to be changed */
}

.img {
    height: /* whatever suits */;
    width: /* whatever suits */;
    border-radius: 50px;
    z-index: 2;
    position: absolute;
}

Note that you should change all the attributes for height and width so they suit your website. Other than that, positioning the image can be done as usual. To make the border more circular simply increase the border-radius.

Additionally, if you want the colors to be more transparent or anything, check out any sort of HEX-selector online.

---

HTML & CSS (Option 2):

<img class="img" src="/image.png" alt="image"/>

.img {
    border-width: 10px;
    border-style: solid;
    border-image: linear-gradient( to bottom, red, orange )1 100;
}

Same as before mostly applies to Option 2 as well. Note that you cannot set a border-radius when using Option 2.

---

These are the 2 options that came to my mind. Try to experiment around with those and you may eventually find a satisfying solution. Maybe someone else can also help out and give better advice than me :)

Good luck!