diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
index f54831035fa3..2a488975ef20 100644
--- a/layout/generic/nsIFrame.cpp
+++ b/layout/generic/nsIFrame.cpp
@@ -9880,16 +9880,17 @@ static void ComputeAndIncludeOutlineArea(nsIFrame* aFrame,
                                   innerRect);
   }
 
-  const nscoord offset = outline->mOutlineOffset.ToAppUnits();
   nsRect outerRect(innerRect);
+  outerRect.Inflate(outline->EffectiveOffsetFor(outerRect));
+
   if (outline->mOutlineStyle.IsAuto()) {
     nsPresContext* pc = aFrame->PresContext();
-    outerRect.Inflate(offset);
+
     pc->Theme()->GetWidgetOverflow(pc->DeviceContext(), aFrame,
                                    StyleAppearance::FocusOutline, &outerRect);
   } else {
-    nscoord width = outline->GetOutlineWidth();
-    outerRect.Inflate(width + offset);
+    const nscoord width = outline->GetOutlineWidth();
+    outerRect.Inflate(width);
   }
 
   nsRect& vo = aOverflowAreas.InkOverflow();
diff --git a/layout/painting/nsCSSRendering.cpp b/layout/painting/nsCSSRendering.cpp
index 506ec94a9b25..5f39ed0b7236 100644
--- a/layout/painting/nsCSSRendering.cpp
+++ b/layout/painting/nsCSSRendering.cpp
@@ -962,9 +962,10 @@ nsCSSRendering::CreateBorderRendererForNonThemedOutline(
     return Nothing();
   }
 
-  const nscoord offset = ourOutline->mOutlineOffset.ToAppUnits();
   nsRect innerRect = aInnerRect;
-  innerRect.Inflate(offset);
+
+  const nsSize effectiveOffset = ourOutline->EffectiveOffsetFor(innerRect);
+  innerRect.Inflate(effectiveOffset);
 
   // If the dirty rect is completely inside the border area (e.g., only the
   // content is being painted), then we can skip out now
@@ -975,7 +976,7 @@ nsCSSRendering::CreateBorderRendererForNonThemedOutline(
     return Nothing();
   }
 
-  nscoord width = ourOutline->GetOutlineWidth();
+  const nscoord width = ourOutline->GetOutlineWidth();
 
   StyleBorderStyle outlineStyle;
   // Themed outlines are handled by our callers, if supported.
@@ -1009,10 +1010,13 @@ nsCSSRendering::CreateBorderRendererForNonThemedOutline(
     RectCornerRadii innerRadii;
     ComputePixelRadii(twipsRadii, oneDevPixel, &innerRadii);
 
-    Float devPixelOffset = aPresContext->AppUnitsToFloatDevPixels(offset);
-    const Float widths[4] = {
-        outlineWidths[0] + devPixelOffset, outlineWidths[1] + devPixelOffset,
-        outlineWidths[2] + devPixelOffset, outlineWidths[3] + devPixelOffset};
+    const auto devPxOffset = LayoutDeviceSize::FromAppUnits(
+        effectiveOffset, aPresContext->AppUnitsPerDevPixel());
+
+    const Float widths[4] = {outlineWidths[0] + devPxOffset.Height(),
+                             outlineWidths[1] + devPxOffset.Width(),
+                             outlineWidths[2] + devPxOffset.Height(),
+                             outlineWidths[3] + devPxOffset.Width()};
     nsCSSBorderRenderer::ComputeOuterRadii(innerRadii, widths, &outlineRadii);
   }
 
diff --git a/layout/painting/nsDisplayList.cpp b/layout/painting/nsDisplayList.cpp
index 0fffd8f5b2bb..a1dc5d44556c 100644
--- a/layout/painting/nsDisplayList.cpp
+++ b/layout/painting/nsDisplayList.cpp
@@ -4015,7 +4015,7 @@ void nsDisplayOutline::Paint(nsDisplayListBuilder* aBuilder, gfxContext* aCtx) {
   nsRect rect = GetInnerRect() + ToReferenceFrame();
   nsPresContext* pc = mFrame->PresContext();
   if (IsThemedOutline()) {
-    rect.Inflate(mFrame->StyleOutline()->mOutlineOffset.ToAppUnits());
+    rect.Inflate(mFrame->StyleOutline()->EffectiveOffsetFor(rect));
     pc->Theme()->DrawWidgetBackground(aCtx, mFrame,
                                       StyleAppearance::FocusOutline, rect,
                                       GetPaintRect(aBuilder, aCtx));
@@ -4044,7 +4044,7 @@ bool nsDisplayOutline::CreateWebRenderCommands(
   nsPresContext* pc = mFrame->PresContext();
   nsRect rect = GetInnerRect() + ToReferenceFrame();
   if (IsThemedOutline()) {
-    rect.Inflate(mFrame->StyleOutline()->mOutlineOffset.ToAppUnits());
+    rect.Inflate(mFrame->StyleOutline()->EffectiveOffsetFor(rect));
     return pc->Theme()->CreateWebRenderCommandsForWidget(
         aBuilder, aResources, aSc, aManager, mFrame,
         StyleAppearance::FocusOutline, rect);
diff --git a/layout/reftests/bugs/424236-5-ref.html b/layout/reftests/bugs/424236-5-ref.html
index 4b74721f0758..e524214986e8 100644
--- a/layout/reftests/bugs/424236-5-ref.html
+++ b/layout/reftests/bugs/424236-5-ref.html
@@ -8,7 +8,6 @@
 	<style type="text/css">
 
 	* { -moz-outline-offset: -2px; outline-offset: -2px; }
-	body > span { outline: 1px dotted black; }
 	/* can't compare to border combined with negative margin because of
 	   margin collapsing */
 	body > div { display: block; outline: 1px dotted black; width: 15em; }
@@ -17,7 +16,7 @@
 </head>
 <body>
 
-<span></span><div>text<br>text<br>text</div>
+<div>text<br>text<br>text</div>
 
 </body>
 </html>
diff --git a/layout/reftests/bugs/424236-9-ref.html b/layout/reftests/bugs/424236-9-ref.html
index bc074e7edbb1..6c3dea9f7be5 100644
--- a/layout/reftests/bugs/424236-9-ref.html
+++ b/layout/reftests/bugs/424236-9-ref.html
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<span></span><div>text</div><span>Some words that must be wider than 10em</span><div>text</div>
+<div>text</div><span>Some words that must be wider than 10em</span><div>text</div>
 
 </body>
 </html>
diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp
index bc73debac9f9..c9ccd7cd4ecc 100644
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -585,6 +585,18 @@ nsChangeHint nsStyleOutline::CalcDifference(
   return nsChangeHint(0);
 }
 
+nsSize nsStyleOutline::EffectiveOffsetFor(const nsRect& aRect) const {
+  const nscoord offset = mOutlineOffset.ToAppUnits();
+
+  if (offset >= 0) {
+    // Fast path for non-negative offset values
+    return nsSize(offset, offset);
+  }
+
+  return nsSize(std::max(offset, -(aRect.Width() / 2)),
+                std::max(offset, -(aRect.Height() / 2)));
+}
+
 // --------------------
 // nsStyleList
 //
diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
index 48a7e6c98391..b3f53e4220c9 100644
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -617,6 +617,8 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleOutline {
     return false;
   }
 
+  nsSize EffectiveOffsetFor(const nsRect& aRect) const;
+
  protected:
   // The actual value of outline-width is the computed value (an absolute
   // length, forced to zero when outline-style is none) rounded to device
diff --git a/testing/web-platform/meta/css/css-ui/outline-013.html.ini b/testing/web-platform/meta/css/css-ui/outline-013.html.ini
deleted file mode 100644
index 8c9e8688a88c..000000000000
--- a/testing/web-platform/meta/css/css-ui/outline-013.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[outline-013.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/css/css-ui/outline-014.html.ini b/testing/web-platform/meta/css/css-ui/outline-014.html.ini
deleted file mode 100644
index 0069f95dc855..000000000000
--- a/testing/web-platform/meta/css/css-ui/outline-014.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[outline-014.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/css/css-ui/outline-015.html.ini b/testing/web-platform/meta/css/css-ui/outline-015.html.ini
deleted file mode 100644
index d49131e63f4f..000000000000
--- a/testing/web-platform/meta/css/css-ui/outline-015.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[outline-015.html]
-  expected: FAIL
diff --git a/testing/web-platform/meta/css/css-ui/outline-016.html.ini b/testing/web-platform/meta/css/css-ui/outline-016.html.ini
deleted file mode 100644
index bd69df8dab37..000000000000
--- a/testing/web-platform/meta/css/css-ui/outline-016.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[outline-016.html]
-  expected: FAIL
diff --git a/testing/web-platform/tests/css/css-ui/negative-outline-offset-ref.html b/testing/web-platform/tests/css/css-ui/negative-outline-offset-ref.html
new file mode 100644
index 000000000000..acf1a6e0e885
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/negative-outline-offset-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+  div {
+    border: 2px solid black;
+    padding: 5px 0; /* No horizontal padding as outline-offset is not affected by it and span simulates it */
+    font-size: 16px;
+  }
+
+  span {
+    display: block;
+
+    /* 3/6px offset for border */
+    height: 2px;
+    width: calc(100% - 20em + 6px);
+    margin: -1px calc(10em - 3px); /* -1px vertical to remove height of span from div height */
+    background: red;
+  }
+</style>
+
+<p>PASS if there is a thin red line in the middle of the box.</p>
+<div>
+  <span></span>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-ui/negative-outline-offset.html b/testing/web-platform/tests/css/css-ui/negative-outline-offset.html
new file mode 100644
index 000000000000..3d20df08539d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/negative-outline-offset.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-ui-4/#outline-offset">
+<link rel="match" href="negative-outline-offset-ref.html">
+<style>
+  div {
+    outline: 1px solid red;
+    outline-offset: -10em;
+
+    border: 2px solid black;
+    padding: 5px;
+    font-size: 16px;
+  }
+</style>
+
+<p>PASS if there is a thin red line in the middle of the box.</p>
+<div></div>
\ No newline at end of file