带边框的CSS甜甜圈图表只在顶部添加边框

我有这个小提琴，只有CSS和HTML。我想做一个油炸圈饼图，有5块，每个部分之间有一个边框和一个小间隙

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.油炸圈饼图{
位置：相对位置；
宽度：200px；
高度：200px；
保证金：0自动2rem；
边界半径：100%
}
p、 居中{
背景：#ffffff；
位置：绝对位置；
文本对齐：居中；
字号：28px；
排名：0；
左：0；
底部：0；
右：0；
宽度：130px；
高度：130像素；
保证金：自动；
边界半径：50%；
线高：35px；
填充：15%0；
}
.部分块{
边界半径：50%；
剪辑：rect（0px，200px，200px，100px）；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.圆圈{
边界半径：50%；
剪辑：rect（0px，100px，200px，0px）；
身高：100%；
位置：绝对位置；
宽度：100%；
字体系列：monospace；
字体大小：1.5rem；
}
#第一部分{
变换：旋转（326度）；
}
#第1部分：圆圈{
背景色：#E64C65；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
动画：前1s1向前；
}
#第二部分{
变换：旋转（38度）；
}
#第二部分：圆圈{
背景色：#11A8AB；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
动画：第二个1s 1向前1s；
}
#第三部分{
变换：旋转（110度）；
}
#第三部分：圆圈{
背景色：#4FC4F6；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
动画：第三个0.5s 1向前2s；
}
#第四部分{
变换：旋转（182度）；
}
#第四部分：圆圈{
背景色：#4FC433；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
动画：第四个0.5s 1向前3s；
}
#第五部分{
变换：旋转（254度）；
}
#第五部分：圆圈{
背景色：#4FC888；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
动画：第五个0.5s 1向前4s；
}
/*动画*/
@先设置关键帧{
从{
变换：旋转（0度）；
}
到{
变换：旋转（68度）；
}
}
@关键帧秒{
从{
变换：旋转（0度）；
}
到{
变换：旋转（68度）；
}
}
@第三个关键帧{
从{
变换：旋转（0度）；
}
到{
变换：旋转（68度）；
}
}
@关键帧第四{
从{
变换：旋转（0度）；
}
到{
变换：旋转（68度）；
}
}
@关键帧第五{
从{
变换：旋转（0度）；
}
到{
变换：旋转（68度）；
}
}

我确实在整个图表周围看到了一个边框-1px黑色边框，对吗？你能提供你看不到的内容或浏览器版本的任何其他详细信息吗？我希望每个div（每个不同颜色的部分）都有自己的边框，而不是整个圆。黑色边框从技术上讲都在圆的外面。clip属性只是将它们切掉。这就是我所想的。有人对如何让它显示有什么想法吗？我不知道我会如何用css来实现它。您可能需要使用SVG来完成此任务。