csstwitter-bootstrapangular-ui-bootstrapangular-ui-bootstrap-tab

ui bootstrap tabs border

I want to remove the side and top borders on active ui bootstrap tabs, and make one fad bottom border. The side and top border is not removed. What am I missing?

.nav-tabs > li > a,
.nav-tabs > li > a:hover{
border: 0px;
background-color: #ffffff;}

.nav-tabs > li.active{
border: 0px;
border-bottom: 3px solid #858585;}

<tabset class="nav nav-tabs tabsetnowrap">
    <tab class="nav-pane" ng-repeat="tab in termstabs track by $index" active="tab.active" disabled="tab.disabled">
    <tab-heading>{{tab.title}}</tab-heading>
    </tab>
</tabset>
Solution

  • You are missing the overruling section.

    if you properly want to be sure that it is overruled you should do it like this:

    .nav-tabs > li > a,
.nav-tabs > li > a:hover{
    border: none !important;
    background-color: #ffffff;
}

    the !important tells the css that unless there is another rule that has the !important operater that is later defined that the code must always be the one that is shown.