CSS Tabs - Border around Content, but not on bottom of the active tab

Question

I have the code below and it's working good so far. My Problem is, that I want a border around the content, but not on the bottom of the active tab. So I can't easily make a border around the content, because disabling on the bottom of the active tab have no effect. If I make the border left, right and bottom of the content, I have no border on the top of the content.

The HTML:

<div id="containerUser">
    <div class="tabsUser">
        <input type="radio" name="tabsUser" id="tabOne" checked="checked">
        <label for="tabOne">
            <i class="bi bi-eye-fill"></i> <span>Overview</span></label>
        <div class="userContent">
            Content Tab 1
        </div>

        <input type="radio" name="tabsUser" id="tabTwo">
        <label for="tabTwo">
            <i class="bi bi-key-fill"></i> <span>Access</span></label>
        <div class="userContent">
            Content Tab 2
        </div>
    </div>
</div>

The CSS:

#containerUser {
    margin-right: 10px;
}

#containerUser .userContent {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

#containerUser .tabsUser {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Make sure it wraps */
}

#containerUser .tabsUser label {
    order: 1;
    display: block;
    padding: 5px 20px;
    margin-right: 5px;
    cursor: pointer;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: bold;
    transition: background ease 0.2s;
    width: 150px;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}

#containerUser .tabsUser .userContent {
    order: 99;
    flex-grow: 1;
    width: 100%;
    height: 300px;
    display: none;
    padding: 1rem;
    background: #fff;
}

This is, how it looks now.

This is, how it should look.

Answer 1

You’re just not thinking third-dimensionally! Web pages have three dimensions, and in this case you need to utilise the third dimension, the z-axis. Elements can be placed in specific layers relative to other elements, and elements in front will mask elements behind.

Start by setting different coloured borders on your tabs and your content area:

Then use relative positioning to move your tabs down by the width of your border, so that they overlap the border of the content area. We could at this point specify a z-index as well to make it clear that we want the tab labels to appear in front of the content area, but it’s not necessary to do so in this case. (Read more about stacking contexts here.)

#containerUser .tabsUser label {
  position: relative;
  top: 1px;
}

Then simply set the bottom border width of the active tab to zero.

#containerUser .tabsUser input:checked + label {
  border-bottom: 0;
}

Here is a snippet to demonstrate the finished result.

#containerUser {
    margin-right: 10px;
}

#containerUser .userContent {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

#containerUser .tabsUser {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Make sure it wraps */
}

#containerUser .tabsUser input {
  visibility: hidden;
}

#containerUser .tabsUser label {
    order: 1;
    display: block;
    padding: 5px 20px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background ease 0.2s;
    width: 150px;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #bbb;
    position: relative;
    top: 1px;
    color: #aaa;
}

#containerUser .tabsUser label:hover {
    color: orange;
}

#containerUser .tabsUser .userContent {
    order: 99;
    flex-grow: 1;
    width: 100%;
    height: 100px;
    padding: 1rem;
    background: #f5f5f5;
    border: 1px solid #bbb;
    border-radius: 10px;
    display: none;
}

#containerUser .tabsUser input:checked + label {
    border-bottom: 0;
    color: black;
    background: #f5f5f5;
}

#containerUser .tabsUser input:checked + label + .userContent {
  display: block;
}

<div id="containerUser">
    <div class="tabsUser">
        <input type="radio" name="tabsUser" id="tabOne" checked="checked">
        <label for="tabOne">
            <i class="bi bi-eye-fill"></i> <span>Overview</span></label>
        <div class="userContent">
            Content Tab 1
        </div>

        <input type="radio" name="tabsUser" id="tabTwo">
        <label for="tabTwo">
            <i class="bi bi-key-fill"></i> <span>Access</span></label>
        <div class="userContent">
            Content Tab 2
        </div>
    </div>
</div>