CSS3 circle with gradient border?

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>