Taking a look at unusual use-cases of CSS borders

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:

Ferenc Almasi

💻 Frontend dev with a passion for beautiful code • 🐦 Tweets webtips on twitter • ✍️ Writes on webtips.dev • Get in touch @ hello@allma.si or visit allma.si 👋

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store