How to make rounded border-image in CSS?

April 22, 2023

I want to create a rounded image profile with linear-gradient color.

My current HTML:

<img src="/images/profile.webp" alt="" class="card-header-user-profile"/>

My current CSS:

.card-header-user-profile {
    height: 80px;
    width: 80px;
    max-height: 100%;
    object-fit: cover;
    border: 2px solid;
    border-image: linear-gradient(45deg, green, red) 1;
    border-radius: 50%;
}

My current result:

I want to make the border: linear-gradient + rounded.

How can I do this in CSS?

>Solution :

It took some experimenting, but I think this:

.card-header-user-profile {
  border-radius: 50%;
  height: 80px;
  width: 80px;
  max-height: 100%;
  object-fit: cover;
  background: linear-gradient(45deg, green, red);
  padding: 3px;
}

should work properly. I set the background to be the gradient instead of the border and then added some padding. You can change the thickness of the border by adjusting the padding.