AI solution for CSS coding question on BFE.dev
15. doughnut chart

.piechart { width: 100px; height: 100px; border-radius: 50%; background-color: #ccc; /* fallback if no percentage is set / background-image: conic-gradient(#f44336 var(--percentage, 0%), transparent 0%); border-width: 10px; border-style: solid; box-sizing: border-box; } / set the border as well to create a hole in the middle */ .piechart::before { content: ""; display: block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; position: absolute; top: 10%; left: 10%; }