<div id="wrap" class="img-wrap">
  <img src="https://picsum.photos/id/823/720" width="360" height="360" alt="">
</div>
  
<div class="controls">
  <div class="control">
    <label for="range">Distance</label>
    <input type="range" max="100" value="46" id="distance" title="Distance">
  </div>
  <div class="control">
    <label for="range">Thickness</label>
    <input type="range" min="1" max="10" value="3" id="thickness" title="Thickness">
  </div>
</div>

:root {
  --border: 3px;
  --color1: #6be89b;
  --color2: #0076a5;
  --from: 30deg;
  --distance: 46%;
}
body {
  background: #33353d;
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}
.img-wrap {
  position: relative;
  padding: 30px;
}
.img-wrap::after {
  content: '';
  border-radius: 999px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: conic-gradient(
    from var(--from),
    var(--color1),
    var(--color2) var(--distance),
    transparent var(--distance)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--border)),
    #fff calc(100% - var(--border) + 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--border)),
    #fff calc(100% - var(--border) + 1px)
  );
}
img {
  border-radius: 999px;
  display: block;
  width: calc(100vw - 80px);
  max-width: 360px;
  height: auto;
}

/* CONTROLS */
.controls {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: #000a;
  padding: 0.5em;
  display: grid;
  gap: 0.25em;
  color: #eee;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
}
.control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
input {
  width: 200px;
}

distance.oninput = e => {
  wrap.style.setProperty('--distance', e.target.value + '%')
}

thickness.oninput = e => {
  wrap.style.setProperty('--border', e.target.value + 'px')
}