Сглаживание радиальных элементов

Пытаюсь сделать радиальный чарт на хтмл. Использую для это-го по две половинки с каждой стороны графа и в зависимости от значниея (>,< 50) поворачиваю/скрываю половинки

но

Столкнулся с проблемой, что из-за сглаживания или еще чего, нижний круг с цветом немного вылезает наружу. Это можно как-то пофиксить? Или бросить эту затею и делать другими технологиями?

<div class="rp-radial-chart" ng-style="setColor()">
    <div class="before" ng-style="setColor()"></div>
    <div class="left-part" ng-style="leftPart()"></div>
    <div class="center"></div>
    <div class="right-part" ng-style="rightPart()"></div>
    <div class="after" ng-style="setColorAfter()"></div>
</div>

@size: 60px;
@backChartColor: #f8f9fb;
@innerCircle: 44px;
 .rp-radial-chart {
  width: @size;
  height: @size; 
  display: block;
  border-radius: @size/2;
  position: relative;
.center {
    display: block;
    position: absolute;
    height: @innerCircle;
    width: @innerCircle;
    background: white;
    z-index: 3;
    border-radius: @innerCircle/2;
    top: (@size - @innerCircle)/2;
    left: (@size - @innerCircle)/2;
}
.before {
    display: block;
    position: absolute;
    width: @size/2;
    height: @size;
    border-radius: @size/2 0 0 @size/2;
    z-index: 1;
}
.after {
    display: block;
    position: absolute;
    width: @size/2;
    height: @size;
    left: @size/2;
    border-radius: 0 @size/2 @size/2 0;
    z-index: 1;
  }
.left-part {
    display: block;
    position:absolute;
    width: @size/2;
    height: @size;
    background: @backChartColor;
    .transform-origin(right, center);
    transform: rotate(0deg);
    border-radius: @size/2 0 0 @size/2;
    z-index: 2;
  }
 .right-part {
    display: block;
    position: absolute;
    width: @size/2 ;
    height: @size;
    left: @size/2;
    background: @backChartColor;
    .transform-origin(left, center);
    /*transform: rotate(0deg);*/
    border-radius: 0 @size/2 @size/2 0;
    z-index: 2;
  }
}