CSS donut chart with borders only adds border to top - css

Question

I have this fiddle https://jsfiddle.net/kywetbeL/19/ and in only CSS and HTML. I wanted to make a donut chart that had 5 chunks and a border and a small gap between each part.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center {
background: #ffffff;
position: absolute;
text-align: center;
font-size: 28px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 130px;
height: 130px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 15% 0 0;
}
.portion-block {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.circle {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#part1 {
transform: rotate(326deg);
}
#part1 .circle {
background-color: #E64C65;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: first 1s 1 forwards;
}
#part2 {
transform: rotate(38deg);
}
#part2 .circle {
background-color: #11A8AB;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: second 1s 1 forwards 1s;
}
#part3 {
transform: rotate(110deg);
}
#part3 .circle {
background-color: #4FC4F6;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: third 0.5s 1 forwards 2s;
}
#part4 {
transform: rotate(182deg);
}
#part4 .circle {
background-color: #4FC433;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: fourth 0.5s 1 forwards 3s;
}
#part5 {
transform: rotate(254deg);
}
#part5 .circle {
background-color: #4FC888;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: fifth 0.5s 1 forwards 4s;
}
/* Animation */
#keyframes first {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes third {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes fourth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes fifth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
<div class="container">
<div class="donut-chart-block block">
<div class="donut-chart">
<div id="part1" class="portion-block">
<div class="circle"></div>
</div>
<div id="part2" class="portion-block">
<div class="circle"></div>
</div>
<div id="part3" class="portion-block">
<div class="circle"></div>
</div>
<div id="part4" class="portion-block">
<div class="circle"></div>
</div>
<div id="part5" class="portion-block">
<div class="circle"></div>
</div>
<p class="center"></p>
</div>
</div>
</div>
I can't seem to get the border around the entire element, only the top.

Answer 1

I would first update your code using my previous answer and then consider a filter to create a border:
.palette {
--g: 10px; /* The gap between shapes*/
--s: 50px; /* the size*/
width: 250px;
aspect-ratio: 1;
display: inline-grid;
filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}
.palette > * {
grid-area: 1/1;
position: relative;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(33.745% - var(--g)/2),
50% calc(50% - var(--g)/2));
}
.palette > *:before {
content:"";
position: absolute;
inset: 0;
border-radius: 50%;
border: var(--s) solid #0000;
border-left-color: var(--c);
animation:m 1s linear both var(--d,0s);
}
#keyframes m {
from{transform:rotate(45deg)}
to {transform:rotate(135deg)}
}
.color1 {
transform: rotate(0deg);
--c: red;
}
.color2 {
transform: rotate(72deg);
--c:blue;
--d:1s;
}
.color3 {
transform: rotate(144deg);
--c:orange;
--d:2s;
}
.color4 {
transform: rotate(216deg);
--c:green;
--d:3s;
}
.color5 {
transform: rotate(288deg);
--c:purple;
--d:4s;
}
<div class="palette">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
</div>