I want to be able to draw a circle with a segment of it another colour, I would like the amount of a segment covered to be able to be increased in increments of 10% from 0% to 100% .

Any examples on Google are all sectors not segments.

So far this is the best I have been able to come up with:

div.outerClass { position: absolute; left: 10px; top: 10px; height: 2.5px; overflow: hidden; -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ transform: rotate(270deg); } div.innerClass { width: 10px; height: 10px; border: 5px solid green; border-radius: 36px; } <div class="outerClass"> <div class="innerClass"></div> </div>