Eu tenho esse CSS para um círculo com uma cor de borda:

.circle {
  border: 6px solid #ffd511;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -khtml-border-radius: 30px;
  width: 30px;
  height: 18px;
  line-height: 20px;
  padding: 12px 6px;
  text-align: center;
}

<div class="circle">17</div>

Se parece com isso:

Como devo mudar o CSS para tertrês cores de borda - como no relógio:

de 0 a 4 cores # 1de 4 a 8 cores # 2de 8 a 12 cores # 3

Tenho certeza, é possível, com elemento<canvas>, mas não consigo fazer isso.