How to make border for half-circle fade out? - css

Question

I want to make half border of a circle which fades out at the end, like this:
I managed to create a border that fades out to the bottom like this:
#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
However, this circle does not fade out at 50% but on the bottom. Also the border does not become thinner. How can I achieve this?

Answer 1

I managed to make it using positions. I assume this would give a better understanding on how to make these kind of shapes.
#cont {
background: -webkit-linear-gradient(green -50%, #fff);
width: 300px;
height: 300px;
border-radius: 100%;
padding: 10px;
position: relative;
top: 0;
left: 0;
}
#box {
background: #fff;
width: 320px;
height: 320px;
border-radius: 100%;
position: absolute;
top: 2%;
left: 0.1%;
}
<div id="cont">
<div id="box"></div>
<div id="box2"></div>
</div>

Answer 2

You can use :after as below.
/*#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}*/
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
position: relative;
}
#box:after{
content: '';
display: block;
width: 100%;
height: 100%;
background: white;
border-radius: 1000px;
display: block;
top: 5px;
position: absolute;
}
<div id="cont">
<div id="box"></div>
</div>