title: How to create a border-bottom-color like linear-gradient on div like circle (see image file)
body: <p>I want to create circle div with a gradient effect on its borders like the image below.  </p>
  
  <p>How can I achieve that?</p>
  
  <p><a href="https://i.stack.imgur.com/S4NUK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S4NUK.png" alt="enter image description here"></a></p>
  
  <p>Here is where I'm getting stuck:</p>
  
  <pre><code>.circle {
      background-color: #ffffff;
      text-align: ;
      width: 675px;
      height: 675px;
      border-radius: 50%;
  
      border-style: solid;
      border-width: 30px;
      border-left-color: #39c8e7;
      border-right-color: #39c8e7;
      border-bottom-color: // here I need linear gradient
      border-top-color:    // this need to be transparent
  }
  </code></pre>