CSS3 circle with gradient border? - gradient

Question

I am trying to replicate a green square image in pure css3. You can see the image here:
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...
Here is my fiddle of the square
The CSS code I am currently using:
.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%);
}
How can I do this gradient circle border in CSS3?
Thanks a lot

Answer 1

I would use a pseudo-element (:before) and style it with a gradient background.
(that is because border-image cannot be combined with border-radius)
.greenBlock {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
width: 42px;
height: 42px;
position:relative;
z-index:10;
}
.greenCore {
background-color: #00c200;
width: 22px;
height: 22px;
border-radius: 50%;
top:50%;
left:50%;
margin-left:-11px; /*half width*/
margin-top:-11px;
position:relative;
}
.greenCore:before{
content:'';
position:absolute;
z-index:-1;
border-radius:50%;
width:28px; /*22 of greenCore + 3 + 3 for the borders*/
height:28px;
left:-3px;
top:-3px;
background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}
<div class="palette greenBlock" data-code="2">
<div class="greenCore"></div>
</div>

Answer 2

One possibility is to make a slightly larger circle with a diagonal gradient background, and place it behind the "core"-circle. This way the larger circle will appear to be a border to the second circle. By modifying your fiddle, I got something like this.
In order to make the gradient I used the linear-gradient function, and assigned it as the background:
background: linear-gradient(135deg, #00de00, #006900);
The first value is the direction of the gradient in degrees. The second two values is the start and end color of the gradient.

Answer 3

Perhaps you can try adding this:
box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
To your .greenCore class. This may be close. You may want to play with the values to get it closer to your liking.