I'm having trouble removing the border between the tab header and container when creating an HTML tab. Can someone provide some advice on how to solve this issue?
Thanks1
==============================This is CSS====================================
.container{
width: 100%;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
.tab-content{
display: none;
background: #f2f2f2;
border-left: thin solid black;
border-top: thin solid black;
border-right: thin solid black;
border-bottom: thin solid black;
padding: 15px;
}
ul.tabs li.current{
background: #f2f2f2;
border-left: thin solid black;
border-top: thin solid black;
border-right: thin solid black;
color: #222;
}
.tab-content.current{
display: inherit;
}
========================This is HTML===============================
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab1</li>
<li class="tab-link" data-tab="tab-2">Tab2</li>
<li class="tab-link" data-tab="tab-3">Tab3</li>
</ul>
<div id="tab-1" class="tab-content current">
Tab 1
</div>
<div id="tab-2" class="tab-content">
Tab 2
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
</div>
Don't forget to include JQuery library 1.7.