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

Answer 2

Try -webkit-backface-visibility: hidden;

 .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; -webkit-backface-visibility: hidden; } .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; -webkit-backface-visibility: hidden; } .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; -webkit-backface-visibility: hidden; } .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>

Answer 3

Try doing this -

a
{
   outline: none;
}

Answer 4

Another solution or better say trick is transform: perspective(0px) rotate(200deg); .

JSFiddle