--- a/devtools/server/actors/highlighters/utils/canvas.js
+++ b/devtools/server/actors/highlighters/utils/canvas.js
@@ -281,18 +281,22 @@ function getBoundsFromPoints(points) {
  *           The current matrix.
  *         - {Boolean} hasNodeTransformations
  *           true if the node has transformed and false otherwise.
  */
 function getCurrentMatrix(element, window) {
   let computedStyle = getComputedStyle(element);
 
   let paddingTop = parseFloat(computedStyle.paddingTop);
+  let paddingRight = parseFloat(computedStyle.paddingRight);
+  let paddingBottom = parseFloat(computedStyle.paddingBottom);
   let paddingLeft = parseFloat(computedStyle.paddingLeft);
   let borderTop = parseFloat(computedStyle.borderTopWidth);
+  let borderRight = parseFloat(computedStyle.borderRightWidth);
+  let borderBottom = parseFloat(computedStyle.borderBottomWidth);
   let borderLeft = parseFloat(computedStyle.borderLeftWidth);
 
   let nodeMatrix = getNodeTransformationMatrix(element, window.document.documentElement);
 
   let currentMatrix = identity();
   let hasNodeTransformations = false;
 
   // Scale based on the device pixel ratio.
@@ -308,18 +312,18 @@ function getCurrentMatrix(element, windo
   }
 
   // Translate the origin based on the node's padding and border values.
   currentMatrix = multiply(currentMatrix,
     translate(paddingLeft + borderLeft, paddingTop + borderTop));
 
   // Adjust as needed to match the writing mode and text direction of the element.
   let size = {
-    width: element.offsetWidth,
-    height: element.offsetHeight,
+    width: element.offsetWidth - borderLeft - borderRight - paddingLeft - paddingRight,
+    height: element.offsetHeight - borderTop - borderBottom - paddingTop - paddingBottom,
   };
   let writingModeMatrix = getWritingModeMatrix(size, computedStyle);
   if (!isIdentity(writingModeMatrix)) {
     currentMatrix = multiply(currentMatrix, writingModeMatrix);
   }
 
   return { currentMatrix, hasNodeTransformations };
 }

--- a/devtools/shared/layout/dom-matrix-2d.js
+++ b/devtools/shared/layout/dom-matrix-2d.js
@@ -227,17 +227,18 @@ function getNodeTransformationMatrix(nod
 }
 exports.getNodeTransformationMatrix = getNodeTransformationMatrix;
 
 /**
  * Returns the matrix to rotate, translate, and reflect (if needed) from the element's
  * top-left origin into the actual writing mode and text direction applied to the element.
  *
  * @param  {Object} size
- *         An element's untransformed `width` and `height`.
+ *         An element's untransformed content `width` and `height` (excluding any margin,
+ *         borders, or padding).
  * @param  {Object} style
  *         The computed `writingMode` and `direction` properties for the element.
  * @return {Array}
  *         The matrix with adjustments for writing mode and text direction, if any.
  */
 function getWritingModeMatrix(size, style) {
   let currentMatrix = identity();
   let { width, height } = size;