Почему видны границы бэкграунда при border-radius 50%?

Question

[Destell]

Ссылка

Почему видны границы бэкграунда при border-radius 50%? Не могу понять, как от них избавиться

Answer 1

[Antony Bark]

Загвоздка в применении border
можно всё упростить и не будет проблем с краями

Answer 2

[Павел Грузных]

border-radius тут вроде и не причем. Скрыть торчащий бэкграунд получилось так:

.circle__rotate {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 11px solid #fff; /*увеличено на 1px*/
}

.circle__rotate--left {
  border-top-right-radius: 149px; /* уменьшено на 1px */
  border-bottom-right-radius: 149px; /* уменьшено на 1px */
  /* border-left: 0; */ /* не надо */
  transform: rotate(0deg) translate(100%, 0);
  animation: rotate2 2s linear forwards;
  transform-origin: 100% 50%;
  animation-delay: 2s;
}

.circle__rotate--right {
  border-top-left-radius: 149px; /* уменьшено на 1px */
  border-bottom-left-radius: 149px; /* уменьшено на 1px */
  /*border-right: 0;*/ /* не надо */
  transform: rotate(0deg) translate(-100%, 0);
  animation: rotate 2s linear forwards;
  transform-origin: 0% 50%;
}