如何使用CSS3创建曲线边界？

我在这里添加了两张图片。你们可以看到第一条曲线是向下曲线，第二条是向上曲线

现在，我有一个使用CSS的矩形框。我想使顶部和底部的边界应该像图片

我可以使用CSS

边界半径

属性来创建边界曲线。但我不明白如何使用CSS3制作这种类型的边界曲线

更新：

以下是我想要的全部输出：

---

您可以使用两个div来实现这一点：一个是黑色背景，另一个是白色背景和圆形边框。包装应具有填充，以模拟边框厚度：

#包装器{
背景：#000000；
宽度：600px；
高度：200px；
填充：10px；
}
#圆曲线{
背景：#ffffff；
宽度：600px；
高度：200px；
边框左下半径：50%50px；
边框右下半径：50%50px；
边框左上半径：50%50px；
边框右上角半径：50%50px；
}

---

我使用

之前

之后

来实现这一点

div{
宽度：400px；
高度：200px；
背景色：#333；
位置：相对位置；
溢出：隐藏；
}
部门：以前{
内容：“；
位置：绝对位置；
前-10%；
宽度：100%；
身高：50%；
背景色：白色；
边界左下半径：50%；
边框右下半径：50%；
}
部门：之后{
内容：“；
位置：绝对位置；
宽度：100%；
底部-10%；
身高：50%；
背景色：白色；
边界左上半径：50%；
边界右上角半径：50%；
}

---

以下是您可以遵循的示例：

正文{
背景：黑色；
}
.拐角处{
宽度：150px；
高度：100px；
填料：2米；
边界底部：0；
位置：相对位置；
背景：白色；
边界半径：1米1米0；
}
.拐弯处：在{
位置：绝对位置；
左：-1px；
右：-1px；
排名：0；
高度：1.5em；
边框：1px纯黑；
边界顶部：0；
边界半径：0 0 3em 3em；
内容：''；
背景：黑色；
}
.拐弯处：之后{
位置：绝对位置；
左：-1px；
右：-1px；
底部：0；
高度：1.5em；
边框：1px纯黑；
边界底部：0；
边界半径：3em3em0；
内容：''；
背景：黑色；
}

---

谢谢你的回答，但应该是反向曲线。如上图所示，上半部显示的是上半部曲线，但应为下半部曲线，如我上传的图片。上半部边框应类似于船形曲线。对于已编辑的图像，您可以将我答案的上半部附加到内容的底部，反之亦然@CreativeArtbdThank。我可以减少或增加曲线吗？是的，只需根据您的需要更改元素前后的边界半径。您可以检查我更新的问题吗？我已经上传了带有顶部和底部曲线的原始图像。请看我更新的问题，祝你的项目好运（真棒兄弟：）你能检查我更新的图片，它显示了实际的曲线样式吗？