CSS - Donut Shape

Example code demonstrating how to draw a donut (ring) shape using HTML and CSS.

This HTML code sets the class name 'donut-shaped' for the <div> element, which serves as the basis for drawing the donut shape (ring shape).

<div class="donut-shaped"></div>

The donut portion of the donut shape (ring shape) is created using the pseudo-element 'before' by utilizing the 'border'.

.donut-shaped {
	--w: 200px; /* Base Size */
	width: var(--w);
	height: var(--w);
	position: relative;
	border: solid #00fa9a calc(var(--w) * 0.2);
	border-radius: 50%;
	box-sizing: border-box;
}