--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -1878,22 +1878,28 @@ class ShapesHighlighter extends AutoRefr
     let radius = values[0];
     const { width, height } = this.currentDimensions;
     const center = splitCoords(values[1]).map(this.convertCoordsToPercent.bind(this));
 
     // Percentage values for circle() are resolved from the
     // used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2).
     const computedSize = Math.sqrt((width ** 2) + (height ** 2)) / Math.sqrt(2);
 
+    // Position coordinates for circle center in pixels.
+    const cxPx = width * center[0] / 100;
+    const cyPx = height * center[1] / 100;
+
     if (radius === "closest-side") {
       // radius is the distance from center to closest side of reference box
-      radius = Math.min(center[0], center[1], 100 - center[0], 100 - center[1]);
+      radius = Math.min(cxPx, cyPx, width - cxPx, height - cyPx);
+      radius = coordToPercent(`${radius}px`, computedSize);
     } else if (radius === "farthest-side") {
       // radius is the distance from center to farthest side of reference box
-      radius = Math.max(center[0], center[1], 100 - center[0], 100 - center[1]);
+      radius = Math.max(cxPx, cyPx, width - cxPx, height - cyPx);
+      radius = coordToPercent(`${radius}px`, computedSize);
     } else if (radius.includes("calc(")) {
       radius = evalCalcExpression(radius.substring(5, radius.length - 1), computedSize);
     } else {
       radius = coordToPercent(radius, computedSize);
     }
 
     // Scale both radiusX and radiusY to match the radius computed
     // using the above equation.