Adding an outer gradient border or overlay shape to a circular image using CSS
I would do it like below. Two radial-gradient for the circles, a conic-gradient for the remaining coloration and a mask to create the gap:
.img-circle{
border-radius: 50%;
}
.border {
padding: 2em;
background:
radial-gradient(farthest-side,teal 98%,#0000) 33% 97%/1em 1em,
radial-gradient(farthest-side,gold 98%,#0000) 100% 50%/1em 1em,
conic-gradient(from -160deg, teal 120deg, blue 0 210deg,gold 0 250deg,#0000 0);
background-repeat:no-repeat;
-webkit-mask:
radial-gradient(farthest-side,
#000 calc(99% - 2em),
#0000 calc(100% - 2em) calc(99% - 1em),
#000 calc(100% - 1em))
}
body {
background:#ccc;
}<img src="https://placeimg.com/280/280/any" class="border img-circle">