Question 45712 in CSS Question posted in
Some basic documentation can be found here.

How to make rounded border-image in CSS?

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:

enter image description here

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

How can I do this in CSS?

Tags:

2

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search