I have implemented nav-tabs within a bootstrap panel.
When the first button is active on the panel header, the border appears thicker on the left side and top.
Query: How can I ensure that there is no double thickness in the border for whichever button is active?
https://i.sstatic.net/yj4um.png
.panel.with-nav-tabs .panel-heading {
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
.panel.with-nav-tabs .panel-heading {
background-color: #fafbfc;
border-bottom: 1px solid #e1e4e8;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding-left: 0;
padding-top: 0;
}
.panel.with-nav-tabs .nav-tabs > li > a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
}
HTML
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
<li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">Default 1</div>
<div class="tab-pane fade" id="tab2default">Default 2</div>
</div>
</div>
</div>