Html 引导中菜单项上的圆形边

我正试图把导航栏的边缘弄圆。最后，我为层次结构中的每个项目添加了一个边界半径，但它仍然不起作用。所有的边缘都很锋利。我该如何解决这个问题

标记：

 <div id="menystrip" class="navbar navbar-inverse navbar-fixed-top">
        <div id="menutitems" class="container">
            <div id="menustrip" class="navbar-collapse collapse">
                <ul id="menustripul" class="nav navbar-nav">
                    <li id="menuitemtoday" class="active"><a href="/">Idag</a></li>
                    <li id="menuitemtomorrow" class=""><a href="/Movies/MoviesTomorrow">Imorgon</a></li>
                    <li id="menuitemdayaftertomorrow" class=""><a href="/Movies/MoviesTheDayAfterTomorrow">P&#229; tisdag</a></li>
                </ul>
            </div>
        </div>
    </div>

编辑：这是当我在chrome中使用开发工具时每个项目得到的样式，请注意下面三个被覆盖（一个破折号）：

---

在呈现页面中（例如通过chrome开发工具）检查是否有内容覆盖了您的样式。如果是这种情况，请尝试每隔一段时间将样式表包括在内，或/或添加

！重要信息

在规则末尾（例如，

边框半径：15px！重要信息；

）。

如果您只希望第一个和最后一个元素使用

边框半径

，请使用以下css：

#menustripul > li:first-child > a{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#menustripul > li:last-child > a{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

或者，如果要为每个菜单项添加：

#menustripul > li > a{
    border-radius: 15px;
}

---

试试看

问题在于

a

上的背景色，因为它模糊了

li

上的边框。卸下它并在

li

上设置颜色，它看起来很好

.navbar inverse#menustripul li.active{
背景色：红色；
}
.navbar inverse#menustripul li.active a{
背景色：透明；
}
#梅努斯蒂普{
边界半径：15px；
}
#菜单{
边界半径：15px；
}
#菜单项{
填充顶部：15px；
垫底：15px；
边界半径：15px；
}
#今天的菜单{
边框左上半径：15px；
边框左下半径：15px；
}
#MenuItemday后天{
边框右上角半径：15px；
边框右下半径：15px；
}

您几乎不应该建议使用

！重要提示

，而是解决问题。但问题是，现在我将它放在每一项上，但它仍然不起作用。我在想也许样式表没有被读取，但是就像我在编辑中写的一样，元素实际上得到了边界半径。世界跆拳道联盟？

#menustripul > li:first-child > a{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#menustripul > li:last-child > a{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#menustripul > li > a{
    border-radius: 15px;
}