--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,25 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
+  --rule-overridden-item-border-color: var(--theme-content-color3);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
+  --rule-overridden-item-border-color: var(--theme-content-color1);
 }
 
 .theme-firebug {
   --rule-highlight-background-color: #ffee99;
   --rule-property-name: darkgreen;
   --rule-property-value: darkblue;
+  --rule-overridden-item-border-color: var(--theme-content-color2);
 }
 
 /* Rule View Tabpanel */
 
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -375,29 +378,29 @@
 }
 
 .ruleview-overridden-item::before {
   position: absolute;
   left: -15px;
   top: 0px;
   content: '';
   display: block;
-  border-left: 1px solid var(--theme-highlight-gray);
-  height: 0.7em;
-  border-bottom: 1px solid var(--theme-highlight-gray);
+  border-left: 0.5px solid var(--rule-overridden-item-border-color);
+  height: 0.8em;
+  border-bottom: 0.5px solid var(--rule-overridden-item-border-color);
   width: 10px;
 }
 
 .ruleview-overridden-item::after {
   position: absolute;
   left: -15px;
   bottom: -7px;
   content: '';
   display: block;
-  border-left: 1px solid var(--theme-highlight-gray);
+  border-left: 0.5px solid var(--rule-overridden-item-border-color);
   height: 100%;
 }
 
 .ruleview-overridden-item:last-child:after {
   display: none;
 }
 
 .ruleview-grid,