Html 向由两个相邻div和clip path生成的形状添加边框

这是我的代码，我想添加两个圆角边框。两个容器共享由剪辑路径和伪类生成的单一背景。当我将边框添加到单个div时，它会被剪裁，不会显示

这就是我想要的边界

这里是边界应该如何圆化

#池容器{
填充：10px；
宽度：200px；
保证金：0 5px 0 5px；
显示器：flex；
弯曲方向：立柱；
背景：黄色；
位置：相对位置；
}
#侧踏板{
高度：80px；
宽度：80px；
过渡：1s全部；
}
#游泳池容器：悬停#侧踏板{
左边距：150像素；
}
#侧踏板，
#主池{
剪辑路径：多边形（0 0100%0100%100%，0 100%）；
}
#前，
#主池：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：线性梯度（120度，rgba（248201129,1）0%，rgba（227,76,145,1）100%）；
}
#主池{
宽度：100%；
高度：150像素；
}

---

如果有一个额外的容器容纳背景，则可以将半透明容器添加到div中，并从父级添加阴影。边框（阴影）将围绕透明边绘制

以下是一个可能的例子：

#父级{
宽度：最大含量；
背景：线性渐变（左下角，透明，rgba（255255,0.75），透明，rgba（255255,0.75），透明，rgba（255255,0.75））黄色；
}
#水池容器{
填充：10px；
宽度：200px；
保证金：0 5px 0 5px；
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
过滤器：阴影（0px-2px 0px黑色）阴影（0px 2px 0px黑色）阴影（-2px 0px 0px黑色）阴影（2px 0px 0px黑色）
}
#侧踏板{
高度：80px；
宽度：80px；
过渡：1s全部；
}
#游泳池容器：悬停#侧踏板{
左边距：150像素；
}
#侧踏板，
#主池{
剪辑路径：多边形（0,100%0,100%100,0,100%）；
}
#前，
#主池：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：线性梯度（120度，rgba（248201129,1）0%，rgba（227,76,145,1）100%）；
}
#主池{
宽度：100%；
高度：150像素；
}

您希望它以后表现如何？是否要移动顶部元素？如果是，如何移动？我通过从表单元素获取输入来移动它，比如顶部divyes的位置和大小。但是，当您移动元素时，边框应该如何运行？还有，你希望半径的表现如何？当上div位于中心时，下div左上角将出现一个角，我希望它是圆角，并且上下div之间形成的内角也是圆角，我希望这些都是圆角，为你的问题添加更多细节，没有人能理解所有这些要求谢谢，投下阴影来营救，我应该为边界半径创建另一个问题吗？