Html CSS将底线添加到jQueryUI选项卡

请看看这个。我已经用{border bottom right radius:0px；border bottom left radius:0px；}覆盖了.ui corner all，以删除顶部蓝色标题的底部半径角，但这也会影响选项卡的底部，我想在其中添加一条带半径角的粗边框底线。有点像这样：

有没有为选项卡底部添加其他类的想法

HTML:

上述代码仅从顶部蓝色导航的底部删除圆角

---

.ui corner all在所有选项卡中都很常见，这就是为什么它会同时影响这两个选项卡。

我怀疑.ui corner all是否是正确的类。此类表示选项卡容器的样式，即选项卡，而不是每个选项卡。您需要操作类选项卡类将边框底部代码添加到此.ui tabs.ui tabs nav中以单独隐藏顶部nav的边框底部

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>

.ui-corner-all {border-bottom-right-radius:0px;border-bottom-left-radius:0px;}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: .2em .2em 0;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
 }