css实现半圆效果

效果图:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3</title>
    <style>
        ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;background:red;text-align: center;}
        .circle1{width:100px;height:50px;border-radius:50px 50px 0 0}
        .circle2{width:50px;height:100px;border-radius: 0 50px 50px 0}
        .circle3{width:100px;height:50px;border-radius:0 0 50px 50px}
        .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px}
        .circle5{width:100px;height:100px;border-radius: 50px}
    </style>
</head>
<body>
    <ul>
        <li class="circle1">上边圆</li>
        <li class="circle2">右边圆</li>
        <li class="circle3">下边圆</li>
        <li class="circle4">左边圆</li>
        <li class="circle5">全圆</li>
    </ul>
</body>
</html>