CSS - Border none still showing a border

Question

I am running into an odd border issue. I have 2 circle charts that are static height and width. Each circle is built by drawing half circles (using borders and border-radius) and rotating .spinner to "fill" the circle.

My issue is that an odd thin border shows up on .spinner even with border-right:none declared. Has anyone ran into this before? or know what may be causing it?

Border on border-right:none

HTML

.chart__wrapper {
  position: relative;
  height: 200px;
  width: 200px;
  cursor: pointer;
}

.wrapper {
  position: absolute;
  background: transparent;
  z-index: 11;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 15px solid #0071BB;
}

.wrapper .spinner {
  border-top-left-radius: 200px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 200px;
  z-index: 200;
  border-right: none;
}

.wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 100;
  border-left: none;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 300;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper {
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.sub__wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  border: 15px solid #009CDD;
}

.sub__wrapper .spinner {
  border-top-left-radius: 150px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 150px;
  z-index: 10;
  border-right: none;
}

.sub__wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 9;
  border-left: none;
}

.sub__wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 12;
}

.value {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 500;
  transform: translate(-50%, -50%);
  font-size: 36px;
  text-align: center;
}

.value .progress__label {
  font-size: 16px;
}

.sub__wrapper,
.sub__wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper:hover .spinner,
.sub__wrapper:hover .filler,
.sub__wrapper:hover .mask {
  animation-play-state: running;
}

<div class="chart__wrapper">
  <div class="wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(345deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
  <div class="sub__wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(200deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
</div>

JSFiddle: https://jsfiddle.net/q0wf7hxm/3/

Answer 1

It's becuase of your CSS transformations.

To get rid of those borders (in Chrome) you must add -webkit-backface-visibility with a value of hidden. This will smooth them out.

-webkit-backface-visibility: hidden;

Here is your JSFiddle updated