Pure CSS gradient circle border

SVG is the recommended way to create a circle shape and draw gradient outline / border around it.

SVG has a circle element that can be used to draw a circle shape. This shape can be filled and outlined with a solid color, gradient or pattern.

* {box-sizing: border-box;}

body {
  background: linear-gradient(#333, #999);
  text-align: center;
  min-height: 100vh;
  padding-top: 10px;
  margin: 0;
}
svg {vertical-align: top;}
<svg width="210" height="210">
  <defs>
    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0" stop-color="#f5d700" />
      <stop offset="1" stop-color="#0065da" />
    </linearGradient>
    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient>
  </defs>
  <g fill="none">
    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" />
    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" />
  </g>
</svg>