Как залить бордер у блока на 15%-25%-50%-75%100%?
В книге секреты Css это сделано с помощью :after, просто вращаете блок внутри круга и постепенно уменьшаете его размеры
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