Modifying CSS to make 'tabbed' area actually look tabular - html

Question

As you can see below, I have a working tabular div (the gray background is just to show the elements of the tabbed area like the border radius. The key here is I want each 'tab' to actually look more tabular which would consist of a top border and then a right border that extends under the rightmost or leftmost tab like this:
The issue is that when I edit the tabs (currently they have a navy background when active but I want to make the navy be the top and right borders and everything else be white)
What am I doing wrong here and why can't my changes affect the whole tab (lilke the border radius part above the title)? Also, this has to be all CSS and that's why I've gone about it this way so far
/*TABBED SIDEBAR*/
.sidebar-tabs {
max-width: 700px;
margin: 32px auto;
padding: 32px;
background: transparent;
}
.sidebar-tabs-div{
border-radius: 8px 8px 0 0;
}
.tabbed-sb {
overflow-x: hidden; /* so we could easily hide the radio inputs */
/*margin: 32px 0;*/
/*padding-bottom: 16px;*/
background: transparent;
border-radius: 8px 8px 0 0;
}
.tabbed-sb [type="radio"] {
/* hiding the inputs */
display: none;
}
.sidebar-tab-list{
height: 40px;
}
.sidebar-tabs {
border-radius: 8px 8px;
margin-top: 0px !important;
display: flex;
align-items: stretch;
list-style: none;
padding: 0;
/*margin-bottom: 15px;*/
border-bottom: 1px solid #fff;
background: #fff;
}
.tab{
margin-top: -15px;
font-weight: 400;
font-size: 18px;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.tab > label {
display: block;
margin-bottom: -1px;
padding: 12px 15px;
background: #082552;
color: #bbb;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s;
}
.tab:hover label {
border-top-color: #333 !important;
color: #eee !important;
}
.sidebar-tab-content {
display: none;
color: #777;
.block{
.block-container{
.block-minorHeader{
display: none;
}
}
}
}
/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed-sb [type="radio"]:nth-of-type(1):checked ~ .sidebar-tabs .tab:nth-of-type(1) label,
.tabbed-sb [type="radio"]:nth-of-type(2):checked ~ .sidebar-tabs .tab:nth-of-type(2) label,
.tabbed-sb [type="radio"]:nth-of-type(3):checked ~ .sidebar-tabs .tab:nth-of-type(3) label,
.tabbed-sb [type="radio"]:nth-of-type(4):checked ~ .sidebar-tabs .tab:nth-of-type(4) label,
.tabbed-sb [type="radio"]:nth-of-type(5):checked ~ .sidebar-tabs .tab:nth-of-type(5) label {
border-bottom: 2px solid white;
background: #082552;
color: #fff;
}
.tabbed-sb [type="radio"]:nth-of-type(1):checked ~ .sidebar-tab-content:nth-of-type(1),
.tabbed-sb [type="radio"]:nth-of-type(2):checked ~ .sidebar-tab-content:nth-of-type(2),
.tabbed-sb [type="radio"]:nth-of-type(3):checked ~ .sidebar-tab-content:nth-of-type(3),
.tabbed-sb [type="radio"]:nth-of-type(4):checked ~ .sidebar-tab-content:nth-of-type(4) {
display: block;
}
<div style="background-color:gray; padding:20px;">
<!--This is a tabular div for latest threads and posts-->
<div class="sidebar-tabs sidebar-tabs-div">
<div class="tabbed-sb">
<input type="radio" id="tab1" name="css-tabs" checked>
<input type="radio" id="tab2" name="css-tabs">
<ul class="sidebar-tabs sidebar-tab-list">
<li class="tab block-minorHeader"><h3><label for="tab1">Recent Threads</label></h3></li>
<li class="tab block-minorHeader"><h3><label for="tab2">Latest Posts</label></h3></li>
</ul>
<div class="sidebar-tab-content">
Pane One
</div>
<div class="sidebar-tab-content">
Pane Two
</div>
</div>
</div>
</div>

Answer 1

I tried recreating the image best I could. Your styling was all over the place, so I simplified as much as I could.
This could be much better accomplished with vanilla javascript, let me know if you would want to see that, I could post in another answer.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tabbar {
height: 40px;
display: flex;
align-items: center;
background-color: rgb(255, 255, 255);
}
input[type="radio"]{
display: none;
}
.tab {
cursor: pointer;
box-sizing: border-box;
height: 100%;
padding-left: 10px;
padding-right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(255, 255, 255);
border-top: 2px solid rgb(211, 211, 211);
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: inset 0px -5px 8px -6px rgba(0,0,0,0.5);
}
.pane {
display: none;
position: absolute;
top: 40px;
left: 0;
}
.pane .content {
padding: .5rem;
}
.tabbar input[type="radio"]:checked + label{
border-top: 2px solid rgb(77, 216, 58);
border-bottom-right-radius: 0;
background-color: rgb(255, 255, 255);
box-shadow: none;
}
.tabbar input[type="radio"]:checked + label + .pane{
display: flex;
}
<div class="tabbar">
<input type="radio" id="tab1" name="tabs" checked>
<label class="tab" for="tab1">
Recent Threads
</label>
<div class="pane">
<div class="content">
Pane One
</div>
</div>
<input type="radio" id="tab2" name="tabs">
<label class="tab" for="tab2">
Latest Posts
</label>
<div class="pane">
<div class="content">
Pane Two
</div>
</div>
</div>