How to remove div's slight white edge?

Question

Below is a part of my code. Problem is how to remove tiny white line on the blue rounded box in mozilla firefox 50.1.0

.s{
  animation: 2s ease-out 0s normal none infinite running r0;
  background: #639dcf none repeat scroll 0 0;	
  border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 90px;
  transition: all 0.2s ease 0s;
  width: 90px;
  margin: 200px;
}
@-webkit-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@-moz-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}

<div type="button" id="menuOrb" class="s m1 "></div>

Answer 1

What you're seeing is actually due to a color mismatch in the keyframes. At 0% and 100% you're using color code #639dcf where at 10% you're using #4f90c9. This is causing enough of a difference between the box-shadow and the background-color of your circle for there to appear to be a "white" gap.

Try changing your keyframes to use:

  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 12px 14px #639dcf;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }

JSFIDDLE

---

FIREFOX UPDATE

Having tested in OSX Firefox v50.1.0, you are correct, there is a trail of antialiasing pixels that surrounds the circle as a result of border-radius. To combat this, the best solution I have found is to leverage the pseudo element :after and "cover" the offending trail with its own border.

CSS

.s{
  animation: 2s ease-out 0s normal none infinite running r0;
  background: #639dcf none repeat scroll 0 0;   
  border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 90px;
  transition: all 0.2s ease 0s;
  width: 90px;
  margin: 200px;
  position:relative;
}
.s:after{
  content:"";
  position:absolute;
  top:-2px;
  left:-2px;
  bottom:-2px;
  right:-2px;
  border:3px solid #639dcf;
  border-radius:50%;
}

Updated Fiddle

Before vs. after