CSS - render semi-circle

by Alex Myronov

HTML

<div></div>

CSS

div {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  border-radius: 0 50% 50% 0;
  position: relative;
}

div:after {
  position: absolute;
  content: ' ';
  height: 100px;
  width: 50px;
  border: 1px solid #fff;
  background: #fff;
  left: -1px;
  top: -1px;
}