Как залить бордер у блока на 15%-25%-50%-75%100%?

take.ms/Vxq9N

<div id="circle" style="
    border-radius: 50%;
    border-width: 4px;
    height: 200px;
    width: 200px;
    border-color: blue;
    border-style: solid;
    border-bottom-color: red;
    transform: rotate(45deg);
"></div>

можно сжелать 3-4 класса с вариантами заполнения окружности и подсовывать их по назначению, это самый простой вариант

посложнее будут 2 вложенных элемента с overflow:hidden

Как-то так?
codepen.io/vistar/pen/jEyedv
Форк отсюда codepen.io/shawkdsn/pen/ejBJw, для своих нужд.
Думаю несложно сделать и для окружности.