Html 父级中的绝对子级未正确填充父级背景

我正在尝试创建自定义选项卡组件，但遇到了css/渲染问题

以下是指向jsBIN的链接：

正如您所看到的，应用边界半径的地方几乎没有红色。如何解决这个问题

正文{
背景色：红色；
}
.交换机容器{
位置：相对位置；
最大宽度：300px；
高度：60px；
边框：2倍纯白；
边界半径：34px；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
保证金：0自动
}
.开关容器跨度{
弹性：1；
身高：100%；
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：1；
用户选择：无；
过渡：所有。2放松；
}
.开关容器span.active{
颜色：蓝色
}
.开关容器跨度：悬停{
光标：指针；
}
.交换机容器：在{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
边界半径：34px；
背景色：白色；
改变：转变；
转变：转变。2放松；
}
.开关容器。左侧：之前{
变换：translateX（0）；
}
.开关容器。右侧：之前{
转化：translateX（100%）；
}

JS-Bin
一点
2点

在下面找到我的答案，因为我使用了框阴影作为边框。因为边界的半径不是很平滑。如果还想使用阴影，请在阴影框中添加另一个逗号分隔的值

正文{
背景色：红色；
}
.交换机容器{
位置：相对位置；
最大宽度：300px；
高度：60px；
盒影：0 2px白色插页；
边界半径：34px；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
保证金：0自动
}
.开关容器跨度{
弹性：1；
身高：100%；
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：1；
用户选择：无；
过渡：所有。2放松；
}
.开关容器span.active{
颜色：蓝色
}
.开关容器跨度：悬停{
光标：指针；
}
.交换机容器：在{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
边界半径：34px；
背景色：白色；
改变：转变；
转变：转变。2放松；
}
.开关容器。左侧：之前{
变换：translateX（0）；
}
.开关容器。右侧：之前{
转化：translateX（100%）；
}

一点
2点

共享一些可运行的代码我已经在链接中共享了代码有一个指向jsBin的链接，您可以编辑并查看itRemove overflow:hidden的全部代码来解决这个问题。@Himanshu Gupta仍然不工作，试试看，我会说这是因为您以前使用过伪元素。当我在元素本身上设置一些样式时，结果会更清晰。