diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index 1181af5330..ae4a4546f8 100644
--- a/lib/reporters/html.js
+++ b/lib/reporters/html.js
@@ -37,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-whole"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
+  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
   '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
   '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
   '<li class="duration">duration: <em>0</em>s</li>' +
@@ -71,7 +71,10 @@ function HTML(runner, options) {
   var stack = [report];
   var progressText = items[0].getElementsByTagName('div')[0];
   var progressBar = items[0].getElementsByTagName('progress')[0];
-  var progressRing = items[0].getElementsByClassName('ring-highlight')[0];
+  var progressRing = [
+    items[0].getElementsByClassName('ring-flatlight')[0],
+    items[0].getElementsByClassName('ring-highlight')[0]];
+  var progressRingRadius = null; // computed CSS unavailable now, so set later
   var root = document.getElementById('mocha');
 
   if (!root) {
@@ -223,17 +226,21 @@ function HTML(runner, options) {
       // setting a toFixed that is too low, makes small changes to progress not shown
       // setting it too high, makes the progress text longer then it needs to
       // to address this, calculate the toFixed based on the magnitude of total
-      var decmalPlaces = Math.ceil(Math.log10(runner.total / 100));
+      var decimalPlaces = Math.ceil(Math.log10(runner.total / 100));
       text(
         progressText,
-        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) + '%'
+        percent.toFixed(Math.min(Math.max(decimalPlaces, 0), 100)) + '%'
       );
     }
     if (progressRing) {
-      var radius = 19; // to do, figure out how to match with css
+      var radius = parseFloat(getComputedStyle(progressRing[0]).getPropertyValue('r'));
       var wholeArc = Math.PI * 2 * radius;
       var highlightArc = percent * (wholeArc / 100);
-      progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
+      // The progress ring is in 2 parts, the flatlight color and highlight color.
+      // Rendering both on top of the other, seems to make a 3rd color on the edges.
+      // To create 1 whole ring with 2 colors, both parts are inverse of the other.
+      progressRing[0].style['stroke-dasharray'] = `0,${highlightArc}px,${wholeArc}px`;
+      progressRing[1].style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
     }
 
     // update stats
diff --git a/mocha.css b/mocha.css
index 72b44de13f..7521580809 100644
--- a/mocha.css
+++ b/mocha.css
@@ -348,24 +348,24 @@ body {
   padding: 0;
 }
 
+#mocha-stats :is(.progress-element, .progress-text) {
+  width: var(--ring-size);
+  display: block;
+  top: 12px;
+  position: absolute;
+}
+
 #mocha-stats .progress-element {
   visibility: hidden;
-  width: var(--ring-size);
   height: calc(var(--ring-size) / 2);
-  position: absolute;
-  top: 11px; /* padding */
-  display: block;
 }
 
 #mocha-stats .progress-text {
   text-align: center;
-  position: absolute;
-  width: var(--ring-size);
-  display: block;
-  top: 11px; /* padding */
   text-overflow: clip;
   overflow: hidden;
   color: var(--mocha-stats-em-color);
+  font-size: 11px;
 }
 
 #mocha-stats .progress-ring {
@@ -373,19 +373,17 @@ body {
   height: var(--ring-size);
 }
 
-#mocha-stats .ring-whole, #mocha-stats .ring-highlight {
+#mocha-stats :is(.ring-flatlight, .ring-highlight) {
   --stroke-thickness: 1px;
   cx: var(--ring-radius);
   cy: var(--ring-radius);
-  r: calc(var(--ring-radius) - var(--stroke-thickness)); /* radius - stroke */
+  r: calc(var(--ring-radius) - calc(var(--stroke-thickness) / 2));
   fill: hsla(0, 0%, 0%, 0);
-  stroke-width: calc(var(--stroke-thickness) * 2);
+  stroke-width: var(--stroke-thickness);
 }
 
-#mocha-stats .ring-whole {
+#mocha-stats .ring-flatlight {
   stroke: var(--mocha-progress-ring-color);
-  stroke-width: calc(var(--stroke-thickness) * 1.8);
-  /* slightly smaller to fix strange edge issue */
 }
 
 #mocha-stats .ring-highlight {