title: CSS3 circle with gradient border?
body: <p>I am trying to replicate a green square image in pure css3. You can see the image here:<img src="https://i.stack.imgur.com/5dKTF.jpg" alt="enter image description here"> </p>
  
  <p>So far I have managed to generate the square, looking just like the one in the image. The problem is the border of the circle in the square. As you can see, the border of that circle in the image is gradient and mine is not (see fiddle) and I have no idea how to replicate this in CSS...</p>
  
  <p><a href="http://jsfiddle.net/mauricederegt/6yczdv1y/" rel="nofollow noreferrer">Here is my fiddle of the square</a></p>
  
  <p>The CSS code I am currently using:</p>
  
  <pre><code>.greenBlock, .greenCore {
      background-color: #00c200;
      border: 3px solid;
      border-top-color: #00de00;
      border-right-color: #006900;
      border-bottom-color: #006900;
      border-left-color: #00de00;
      z-index: 10;
      width: 42px;
      height: 42px;
  }
  
  .greenCore {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      -webkit-transform: translate(25%, 25%);
      transform: translate(25%, 25%); 
  }
  </code></pre>
  
  <p>How can I do this gradient circle border in CSS3?</p>
  
  <p>Thanks a lot</p>