How to Make a Doughnut Chart Icon With CSS

CSS borders have been long known as a special property that can be used creatively to create various UI elements — apart from borders — such as strokes, chevrons, or arrows.

In this tutorial, we’re going to take a look at how you can also use it to create a doughnut chart icon with only borders, that at the end of the tutorial, will look like the following:


Creating A Doughnut With CSS Borders

To start things off, first, let’s create a doughnut with only one color. To do this, I’ve set up the following rules that create a 50x50px black rectangle with a red border, at the middle of the screen.

.doughnut {
    background: #000;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid red;
}
doughnut.css
Copied to clipboard!

As you can see, this doesn’t really look like a doughnut, however. To fix this, and create a stroke, add a 100% border-radius with a transparent background:

.doughnut {
    ...
    border-radius: 100%;
}
doughnut.cssMake sure to remove the background property to make the fill transparent
Copied to clipboard!

Adding Segments to the Doughnut

To add different segments, you can change the color of each side of the border with separate rules:

.doughnut {
    ...
    border: 10px solid #FF6188;
    border-top: 10px solid #A9DC62;
    border-left: 10px solid #78DCDC;
    border-right: 10px solid #FFD862;
}
doughnut.css
Copied to clipboard!

Playing With Segments and Rotation

To make this less symmetric, you can also add a little bit of rotation. By adding a little bit of animation, you can also turn it into a circle loading indicator:

@keyframes loading {
    0%   { transform: translate(-50%, -50%) rotate(25deg);  }
    100% { transform: translate(-50%, -50%) rotate(385deg); }
}

.doughnut {
    transform: translate(-50%, -50%) rotate(25deg);
    /* Add animation if you want to turn it into a loading indicator */
    animation: loading 1s ease-in-out infinite;
}
doughnut.cssNote that by default, the element has a transform applied
Copied to clipboard!

You can also create bigger segments, by simply making neighboring borders the same color:

.doughnut-01 {
    /* default values */
}

.doughnut-02 {
    border-left: 10px solid #78DCDC;
    border-bottom: 10px solid #78DCDC;
}

.doughnut-03 {
    border-left: 10px solid #FF6188;
    border-right: 10px solid #FF6188;
}
doughnut.css
Copied to clipboard!

Playing With Different Border Styles

You can also play around with the border-style property, to create different styles of doughnuts. Some examples are:

.doughnut-01 { border-style: dotted; }
.doughnut-02 { border-style: double; }
.doughnut-03 { border-style: groove; }
.doughnut-04 { border-style: ridge; }
doughnut.css
Copied to clipboard!

Putting Everything Together

To finish things up, you can also add additional borders to it, with a box-shadow. You can add as many box-shadow as you’d like, you only need to separate the different values with a comma.

.doughnut {
    box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
}
doughnut.css
Copied to clipboard!

Putting everything together, this is the final set of rules that makes up the element:

.doughnut {
    display: block;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(25deg);
    border: 10px solid #FF6188;
    border-top: 10px solid #A9DC62;
    border-left: 10px solid #78DCDC;
    border-right: 10px solid #FFD862;
    box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
}
doughnut.css
Copied to clipboard!

Summary

In summary, CSS borders can be used in various creative ways. As you’ve seen, even if you’ve already used up the border property for a given element, you can still add additional borders on top of that with the use of box-shadow. To make this icon more customizable, it can also be replaced by SVG paths.

Have you already worked with CSS borders in a creative way? Let us know in the comments below! Thank you for reading through, happy styling! 🎨

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.