CSS为jQueryUI选项卡添加底线

Question

请看一下 FIDDLE 。我已用.ui-corner-all覆盖{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}以删除顶部蓝色标题的底部半径角，但它也会影响标签的底部，我想在其中添加粗边框底线有半径角。有点像这样：

是否有任何想法为标签底部添加不同的类？

HTML：

<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;}

Answer 1

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

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

.ui-corner-all在标签中很常见，这就是它影响两者的原因。