Html 带CSS的曲线拐角

我已经有了一个简单的导航栏和一些CSS样式

导航栏顶部将有一个白色边框，用于内部链接

对于两个外部链接，我希望左边有一个边框，左边有一个边框，右边有一个边框，还有弯曲的拐角，但我不知道如何将CSS集中在这两个li上

我试着给李一个家的身份证，但没用

我还试着在ul和导航栏标签中添加弯角代码。 这是我试过的

<div id="NavBar">
<ul>
<li id="Home"><a href="Index.php"><strong>Home</strong></a></li>
<li><a href="AboutUs.php"><strong>About Us</strong></a></li>
<li><a href="Products.php"><strong>Products</strong></a></li>
<li><a href="Policies.php"><strong>Policies</strong></a></li>
<li id="ContactUs"><a href="ContactUs.php"><strong>Contact Us</strong></a></li> 
</ul>

谢谢你的帮助

创建了一个jsiddle:

Use:first-child和：last-child。 要仅访问列表的第一个或最后一个元素，请执行以下操作：

ul li:first-child {
    Styles for first element
}

ul li:last-child {
    Styles for last element
}

---

这样，您就可以将所需的样式应用于匹配链接。

如果要使用

宽度：20%

并指定边框宽度，则需要

框大小：边框框，这样在确定总宽度时将考虑边框大小。否则它会像现在一样分成两行

然后，您可以通过执行以下操作设置要应用边界半径的特定角点：
边界半径：5px 0（左上、右上、右下、左下）

你可以用id选择器来做。。。或者使用CSS选择器
：first child
和
：last child
选择列表中的第一个和最后一个元素：

#NavBar li {
   box-sizing:border-box;
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;
}

#NavBar li:first-child {
    border-radius: 5px 0 0 0;
}

#NavBar li:last-child {
    border-radius: 0 5px 0 0;
}

这非常有效，谢谢！谢谢你对宽度的建议。
#NavBar li {
   box-sizing:border-box;
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;
}

#NavBar li:first-child {
    border-radius: 5px 0 0 0;
}

#NavBar li:last-child {
    border-radius: 0 5px 0 0;
}