CSS标签页：为内容添加边框但隐藏激活标签底部边框

需求说明 #

需要实现：

• 给内容区域（.userContent）添加完整边框
• 隐藏激活状态标签的底部边框，避免和内容区顶部边框重复

直接给内容区加完整边框会导致激活标签底部边框无法隐藏；仅给内容区加左、右、下边框则顶部无框，无法达到预期效果。

现有代码 #

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>

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;
}

效果对比 #

当前效果 #

预期效果 #

解决方案 #

通过调整激活标签的样式和内容区边框设置，实现需求：

1. 给激活状态的标签设置白色背景，移除底部边框，并向上偏移1px，覆盖内容区的顶部边框
2. 给内容区添加完整边框，同时去掉顶部圆角，和标签的圆角匹配

修改后的完整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);
    border-bottom: 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;
    border: 1px solid rgba(0, 0, 0, 0.3); /* 内容区添加完整边框 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 激活标签样式 */
#containerUser .tabsUser input[type="radio"]:checked + label {
    background: #fff; /* 和内容区背景一致 */
    border-bottom: none; /* 移除底部边框 */
    margin-bottom: -1px; /* 向上偏移，覆盖内容区顶部边框 */
}

/* 显示选中标签对应的内容 */
#containerUser .tabsUser input[type="radio"]:checked + label + .userContent {
    display: block;
}

关键修改点：

• 给所有标签添加border-bottom，保证未激活标签的底部边框显示
• 内容区添加完整border，并去掉顶部圆角
• 激活标签设置background: #fff、border-bottom: none，并通过margin-bottom: -1px让标签和内容区顶部无缝衔接，隐藏内容区的顶部边框部分

内容的提问来源于stack exchange，提问作者TheQuestionmark