Outlining a circular element with CSS

Question

I have a circle which is created with the following styling:

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

I would like to have an outline around this circle, however, I would like it to only be around part of the circle to produce a percentage.

For example:

50% will create an outline starting from 12 o'clock to 6 o'clock
25% will create an outline starting from 12 o'clock to 3 o'clock
66% will create an outline starting from 12 o'clock to 8 o'clock

As the width and height and defined, I could go about this by creating a circle in the same position which is slightly larger to create an outline, though I would not know how to create the 'pie' shape.

I would also like to be able to support as many browsers as possible.

Thanks in advance.

Have a look at this - http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281#31199281. Seems similar to what you need. — Harry, Aug 18 '15 at 16:15
http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle — MoLow, Aug 18 '15 at 16:16
A solution without SVG would be best, due to support with IE. — Pav Sidhu, Aug 18 '15 at 16:17
You could also use canvas. But I can't think of a CSS only way, especially when you require an IE solution. — j08691, Aug 18 '15 at 16:18
`canvas` can help you, download a free ebook and start learning `canvas` — Rohit Kumar, Aug 18 '15 at 16:18
By the way if you want a pie instead of an outline, remove the `container` element from the snippet that I linked in my previous comment and increase the box-shadow on the parent element. And just to be clear, I would still recommend SVG but this can be achieved with CSS if you are really intent on avoiding SVG. — Harry, Aug 18 '15 at 16:20
@Paulie_D Though I would like to support IE8, if I was to use SVG, how would I go about it? I guess users with the latest browsers should get the latest features. — Pav Sidhu, Aug 18 '15 at 16:25
This is easy to adapt to your needs: https://github.com/azagniotov/pielicious It works on IE8! — connexo, Aug 18 '15 at 16:26

connexo · Accepted Answer · 2015-08-18T16:55:50.710

7

Basically, you use any library capable of generating a piechart, then you place a circle inside the pie chart matching your page's (or element's) background-color right on it so it looks like a donut (actually a donut chart is what you are looking for). Of course you use only two fragments for your application.

https://github.com/azagniotov/pielicious