Circle with half border CSS [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
How to make this with CSS?

Answer 1

The simplest way I can think to achieve this is to use border-radius on a grey div to make the circle and to apply black borders to two adjacent sides. You can then simply rotate the element so that the borders are on the top.
div.circleThing {
width:100px; height:100px;
background:#666;
border:10px solid black;
border-radius:50%;
border-bottom-color:#fff;
border-right-color:#fff;
transform: rotate(45deg);
}
<div class="circleThing"></div>

Answer 2

Another possible alternative if you do not want to rotate the element is to use a pseudo-element which is placed behind its parent.
Then add a linear gradient background with a cutoff to white and then you get your desired effect.
This does require a little more CSS and is a little more difficult but you get the plus side of not having rotated elements.
.circle {
width: 130px;
height: 130px;
background: grey;
margin: 10px;
border-radius: 50%;
position: relative;
}
.circle:before {
content: '';
position: absolute;
z-index: -1;
width: 150px;
height: 150px;
display: block;
margin: -10px;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 1) 100%);
border-radius: 50%;
}
<div class="circle"></div>