Html 完全圆形单边框

我目前有，我想知道我是否可以使底部边界完全圆

这是一个不起作用的特定CSS：

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

我希望底部边框是完全圆形的矩形，就像

使用CSS和HTML有什么方法可以做到这一点吗

更新代码 您可以将其转换为如下所示的ul菜单，然后通过CSS中的第n个子属性将其作为目标，而不是向每个项添加ID

HTML

像这样的

第一个{宽度：300px；背景色：绿色；} 第二个{宽度：80px；背景色：红色；高度：10px；边框半径：5px；位置：相对；顶部：-15px；左侧：3px；} 第三个{宽度：80px；背景色：红色；高度：10px；边框半径：5px；位置：相对；顶部：-25px；左侧：99px；} 第四{宽度：80px；背景色：红色；高度：10px；边框半径：5px；位置：相对；顶部：-35px；左侧：200px；}

---

当然，这并不像您希望的那样工作，因为您的元素只有底部边框。我建议插入一个带有上下边框的伪元素…这是他希望边框的显示方式，但不是想要的结果，请仔细阅读问题。谢谢，工作非常完美：我刚刚添加了导航主页：after{background:B8312F}导航服务：after{background:1fa67a}导航工作：after{background:2980b9}导航联系人：after{背景：2c3e50}要获得我想要的颜色：@james55555关于颜色，请检查更新的代码以获得更好的方法：希望有帮助！

nav a:after {
    content: "";
    height: 6px;
    background: red;
    position: absolute;
    z-index: 1;
    top:20px; right:0; left:0; bottom:0;
    border-radius: 45px;
}

<div>
<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">Services</a></li>
  <li><a href="">Work</a></li>
  <li><a href="">Contact</a></li>
</ul>
</div>

.nav li:nth-child(1) a:after {
    background: blue;
}

.nav li:nth-child(2) a:after {
    background: yellow;
}

.nav li:nth-child(3) a:after {
    background: red;
}

.nav li:nth-child(4) a:after {
    background: pink;
}