Border-radius: 50% not producing perfect circles in Chrome
css, google-chrome
Solution
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;
Problem
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 rotate a circle quickly, and this is where this problems shows itself. Is this a bug with Chrome's border-radius? Or is this something with the transform? Can anyone suggest a work around? Edit: removed outdated example link