Bootstrap 4 如何在Bootstrap ul li上设置边界半径？

我想在右上角、右下角和左下角引入20px的边界半径

但即使在应用边界半径之后，它也不会被应用

这里是小提琴链接：

.frequentBookingCardsContainer{
宽度：305px；
保证金：0自动；
填充：10px 10px 40px 10px；
}
/*聊天室列表选项框*/
.ChatbotListOptions框{
边界半径：20px！重要；
}
.聊天室列表选项框ul{
边界半径：20px！重要；
}

Cras justo odio
Dapibus ac设施位于
Morbi leo risus
Porta ac CONCENTETTUR ac
eros的前庭

这将生成您想要的布局：

html:

结果:

如果要将它们应用于每个列表项，可以使用以下代码段：

  <!-- List Group Start -->
  <ul class="list-group">
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Cras justo odio</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Dapibus ac facilisis in</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Morbi leo risus</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Porta ac consectetur ac</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Vestibulum at eros</li>
  </ul>
  <!-- List Group End --> 

cra justo odio
Dapibus ac设施处于
Morbi leo risus
Porta ac CONCENTETUR ac
eros的前庭

结果:

说明：您的样式未应用，原因如下：

• 您将类

  四舍五入-0

  与

  右四舍五入

  和

  底部四舍五入

  一起应用
• 由于bootstrap.css是在组件的css之后加载的，因此优先级较高，所以覆盖不起作用

---

结论：在这些情况下使用自定义css类。

删除

rounded-0

类。是的，删除rounded-0确实给了我一个很小的半径。它希望半径为20px；我该怎么做呢？让我给你写一个答案，给我一两秒钟，因为我是@work atm。当然，非常感谢。如果可能，请包括为什么边界半径：20px；在你的回答中，不直接起作用。

/* Carousel data container */
.frequentBookingCardsContainer {
  width: 305px;
  margin: 0 auto;
  padding: 10px 10px 40px 10px;
}

.rounded-top-right-20 {
  border-top-right-radius: 20px!important;
}

.rounded-bottom-20 {
  border-bottom-left-radius: 20px!important;
  border-bottom-right-radius: 20px!important;
}

  <!-- List Group Start -->
  <ul class="list-group">
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Cras justo odio</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Dapibus ac facilisis in</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Morbi leo risus</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Porta ac consectetur ac</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Vestibulum at eros</li>
  </ul>
  <!-- List Group End -->