How to add a gradient to a circular border?

Question

I'd like to implement graphics with css of a photo-like image (not a button) but I'm not sure how to put the gradation of the border. Can someone explain to me?

width: 50px;
height: 50px;
background: linear-gradient(-135deg, #27c4f3 0%,#9dd2ff 100%);
border-radius:42px;
border:4px solid;
display:inline-block;
cursor:pointer;
border-image:linear-gradient(#27c4f3 0%,#9dd2ff 100%);

Answer 1

I was able to achieve something similar by:

1. using an outer and inner circle
2. making the outer larger
3. positioning the inner in the center of the outer
4. making the background of the outer a gradient

.button {
  background: linear-gradient(#0000ff 0%, #ff00ff 100%);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  height: 100px;
  place-items: center;
  width: 100px;
}

.button__body {
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  height: 80px;
  width: 80px;
}

<div class="button">
  <div class="button__body">Hey</div>
</div>