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;
}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%;
}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;
}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;
}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;
}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; }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;
}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;
}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! 🎨
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
