Javascript 如何制作圆角和弧形边的connect4板？

我想制作一个具有给定确切样式和属性的connect4板。它看起来像（忽略它填充的碎片）

如何使侧面从侧面弯曲，如图所示？请尝试仅使用HTML元素来解决此问题。如果有的话，请给我

目前我的代码看起来像

for（设i=0；i<64；i++）{
document.getElementById（“cont”）.appendChild（document.createElement（'div'））
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
#续{
显示：网格；
网格模板列：重复（8，80px）；
网格模板行：重复（8，80px）；
背景色：#84A4FC；
宽度：适合的内容；
高度：800px；
宽度：800px；
栅隙：20px；
填充顶部：10px；
左侧填充：10px；
}
#续{
背景色：白色；
宽度：80px；
高度：80px；
方框阴影：插入0px 3px 6px 00000040；
边界半径：50%；
边框：2个实心#FFFFFF；
}

---

您可以使用SVG过滤器来近似此值（更多详细信息如下：）

for（设i=0；i<64；i++）{
document.getElementById（“cont”）.appendChild（document.createElement（'div'））
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
#续{
显示：网格；
网格模板列：重复（8，80px）；
网格模板行：重复（8，80px）；
高度：800px；
宽度：800px；
栅隙：20px；
填充顶部：10px；
左侧填充：10px；
/*我们需要一个背景，只覆盖中间部分，而不是整个元素*/
背景：线性梯度（#84A4FC 0）中心/计算（100%-40px）计算（100%-40px）无重复；
筛选器：url（#round）；/*此*/
}
#续{
背景色：白色；
宽度：80px；
高度：80px；
框阴影：
插入0px 3px 6px 000000 40，
0 10px#84A4FC；/*添加了此*/
边界半径：50%；
边框：2个实心#FFFFFF；
}