Question

How to create a donut with rounded edges in one direction and a white border between segments?

I am trying to create a donut chart with a specific styling where each segment has rounded edges on one side to give it a smooth, polished appearance. Additionally, I want to include a white border or gap between the segments to clearly distinguish them, but I am struggling to implement both features simultaneously. While I can create a basic donut chart, adding these stylistic elements has proven challenging. How can I achieve this design effectively

Answer 1

You can use CSS and conic-gradient for creating donut charts.

Approach:

Create the donut shape using a circular div.

Use conic-gradient to create colored segments in the donut with a white border.

Apply border-radius to give the segments a rounded edge in one direction.

Steps:

HTML:

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

CSS:

.donut {

  width: 400px;

  height: 400px;

  border-radius: 50%; /* Make it circular */

  background: conic-gradient(

    #ff0000 0% 25%,     /* Red segment (25%) */

    #00ff00 25% 50%,    /* Green segment (25%) */

    #0000ff 50% 75%,    /* Blue segment (25%) */

    #ff00ff 75% 100%    /* Purple segment (25%) */

  );

  border: 20px solid white; /* White border between segments */

  background-clip: content-box; /* Ensure the border doesn't overlap the donut */

}