How to make border for half-circle fade out?

user_2311074 0
Viewed 59

I want to make half border of a circle which fades out at the end, like this: enter image description here

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?

css
2 Answers

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>

user_153512960

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>

user_26894690
Related