css 实现半圆弧度

 border-radius: 50% 50% 0 0/50% 100% 0 0;

  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;

.circle1 {

    width: 100px;

    height: 200px;

    border: 1px solid black;

    border-radius: 100% 0 0 100%/50%;

    border-right: none;

}

.circle2 {

    width: 200px;

    height: 100px;

    border: 1px solid black;

    border-radius: 50% 50% 0 0/100% 100% 0 0;

    border-bottom: none;

}

.circle3 {

    width: 100px;

    height: 200px;

    border: 1px solid black;

    border-radius: 0 100% 100% 0/50%;

    border-left: none;

}

.circle4 {

    width: 200px;

    height: 100px;

    border: 1px solid black;

    border-radius: 0 0 50% 50%/0 0 100% 100% ;

    border-top: none;

}

 <ul>
  <li><p class="circle1"></p></li>
  <li><p class="circle2"></p></li>
  <li><p class="circle3"></p></li>
  <li><p class="circle4"></p></li>
 </ul>