CSS3 circle with gradient border?

Question

I am trying to reproduce an image of a green square in pure css3. You can see the image here:

So far I have managed to create a square similar to the one shown in the picture. The problem is the border of the circle in the square. As you can see, the border of this circle in the image is gradient, but I don’t (see the Violin), and I have no idea how to copy this into CSS ...

Here is my square violin

The CSS code that I am currently using is:

.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 make this gradient circle border in CSS3?

Thank you so much

Answer 1

(:before) .
( border-image 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>

Hide result

Answer 2

, "" -. , . , - this.

, linear-gradient :

background: linear-gradient(135deg, #00de00, #006900);

- . - .

Answer 3

, :

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 class .greenCore. It may be close. You might want to play around with values ​​to bring it closer to your liking.