Border-radius: 50% not producing perfect circles in Chrome

Question

Usually border-radius: 50% works fine for most applications, and Chrome produces what looks like a circle. But in this instance, I am trying to continually rota

Answer 1

It's caused by the roundings in the way the "radius" is calculated. Since the size is an even number the border is "in-between" two pixels... long history, at the end:

Workarround: Set your divs circles size an "odd" number of pixels.

$ring-medium-outer: 437px;
$ring-medium-inner: 381px;