use css to create shape with this border

Question

I want to create this shape using css or any other possible option. Is it possible? Is there any inside negative border for such a shape?

Thanks

Answer 1

something like this?

.shape{
  display:inline-block;
  position:relative;
  background-color:black;
  width:60px;
  height:60px;
  padding-top:20px;
  overflow:hidden;
}
.shape:before{
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  height:40px; 
  border-radius:50%;
  content:"";
  background-color:white;
}

<div class="shape">
</div>