How to make rounded border-image in CSS?

Question

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?

Note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Apr 22 '23 at 12:18

atlaska826 · Accepted Answer · 2023-04-22T00:50:08.803

2

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;
}

<img src="https://dummyimage.com/80x80/edd8ed/080808" alt="" class="card-header-user-profile"/>

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.

edited Apr 22 '23 at 00:50

answered Apr 21 '23 at 23:50

atlaska826

64
7

Perfect. SImple. No additional wrappers. Cross-browser. Thank you. – Menai Ala Eddine - Aladdin Apr 21 '23 at 23:53
Please fix your code snippet. – Menai Ala Eddine - Aladdin Apr 22 '23 at 00:00

score -1 · Answer 2 · answered Apr 21 '23 at 23:36

Would something like this work? You may have to adjust some of the colors, positioning to get it to your exact liking.

.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%;
  background-image: linear-gradient(white, white), radial-gradient(circle at bottom left, green, red);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

<img class="card-header-user-profile" src="https://place-hold.it/80">

When I change the `border-image` value to 0, it works on Mozilla but it does not work on chrome. — Menai Ala Eddine - Aladdin, Apr 21 '23 at 23:46

How to make rounded border-image in CSS?

2 Answers2