--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -124,17 +124,17 @@
                  class="includebrowserstyles"/>
           <label id="browser-style-checkbox-label" for="browser-style-checkbox"
                  data-localization="content=inspector.browserStyles.label"></label>
         </div>
 
         <div id="computed-container">
           <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper"></div>
-            <div id="computed-property-container" class="theme-separator devtools-monospace" tabindex="0" dir="ltr"></div>
+            <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
             <div id="computed-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>
       </div>
 
       <div id="sidebar-panel-animationinspector" class="theme-sidebar inspector-tabpanel">
         <iframe class="devtools-inspector-tab-frame"></iframe>
       </div>

--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -92,17 +92,17 @@ RuleEditor.prototype = {
 
     // Do not allow editing anonymousselectors until we can
     // detect mutations on  pseudo elements in Bug 1034110.
     return trait && !this.rule.elementStyle.element.isAnonymous;
   },
 
   _create: function () {
     this.element = this.doc.createElement("div");
-    this.element.className = "ruleview-rule theme-separator devtools-monospace";
+    this.element.className = "ruleview-rule devtools-monospace";
     this.element.setAttribute("uneditable", !this.isEditable);
     this.element.setAttribute("unmatched", this.rule.isUnmatched);
     this.element._ruleEditor = this;
 
     // Give a relative position for the inplace editor's measurement
     // span to be placed absolutely against.
     this.element.style.position = "relative";
 

--- a/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
@@ -111,18 +111,17 @@ function* assertPseudoAddedToNode(inspec
   let hasLock = yield testActor.hasPseudoClassLock(selector, PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
   hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
   hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
 
   info("Check that the ruleview contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(
-    ".ruleview-rule.theme-separator");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule");
   is(rules.length, 3,
      "rule view is showing 3 rules for pseudo-class locked div");
   is(rules[1]._ruleEditor.rule.selectorText, "div:hover",
      "rule view is showing " + PSEUDO + " rule");
 
   info("Show the highlighter on " + selector);
   yield showPickerOn(selector, inspector);
 
@@ -142,18 +141,17 @@ function* assertPseudoRemovedFromNode(te
   hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
   ok(!hasLock, "pseudo-class lock has been removed");
   hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
   ok(!hasLock, "pseudo-class lock has been removed");
 }
 
 function* assertPseudoRemovedFromView(inspector, testActor, ruleview, selector) {
   info("Check that the ruleview no longer contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(
-    ".ruleview-rule.theme-separator");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule");
   is(rules.length, 2, "rule view is showing 2 rules after removing lock");
 
   yield showPickerOn(selector, inspector);
 
   let value = yield testActor.getHighlighterNodeTextContent(
     "box-model-infobar-pseudo-classes");
   is(value, "", "pseudo-class removed from infobar selector");
   yield inspector.highlighter.hideBoxModel();

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -70,20 +70,16 @@ body {
 }
 
 .theme-gutter {
   background-color: var(--theme-tab-toolbar-background);
   color: var(--theme-content-color3);
   border-color: var(--theme-splitter-color);
 }
 
-.theme-separator {
-  border-color: var(--theme-splitter-color);
-}
-
 .theme-fg-color1,
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,
 .variable-or-property[return] > .title > .name,
 .variable-or-property[scope] > .title > .name {
   color: var(--theme-highlight-red);
 }
 

--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -68,20 +68,16 @@ body {
 }
 
 .theme-gutter {
   background-color: var(--theme-tab-toolbar-background);
   color: var(--theme-content-color3);
   border-color: var(--theme-splitter-color);
 }
 
-.theme-separator { /* grey */
-  border-color: #cddae5;
-}
-
 .cm-s-mozilla .cm-unused-line {
   text-decoration: line-through;
   text-decoration-color: var(--theme-highlight-bluegrey);
 }
 
 .cm-s-mozilla .cm-executed-line {
   background-color: #fcfffc;
 }

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -141,20 +141,16 @@
 .ruleview-code {
   direction: ltr;
 }
 
 .ruleview-property:not(:hover) > .ruleview-enableproperty {
   pointer-events: none;
 }
 
-.ruleview-expandable-container[hidden] {
-  display: none;
-}
-
 .ruleview-expandable-container {
   display: block;
 }
 
 .ruleview-namecontainer {
   cursor: text;
 }
 
@@ -163,16 +159,17 @@
   padding-right: 5px;
 }
 
 .ruleview-propertyvaluecontainer a {
   cursor: pointer;
 }
 
 .ruleview-computedlist,
+.ruleview-expandable-container[hidden],
 .ruleview-overridden-items[hidden],
 .ruleview-overridden-rule-filter[hidden],
 .ruleview-warning[hidden],
 .ruleview-overridden .ruleview-grid {
   display: none;
 }
 
 .ruleview-computedlist[user-open],
@@ -217,27 +214,23 @@
   color: #0000FF;
 }
 
 .ruleview-rule-source:not([unselectable]):hover {
   text-decoration: underline;
 }
 
 .ruleview-header {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-bottom-style: solid;
+  border-bottom: 1px solid var(--theme-splitter-color);
   padding: 1px 4px;
   -moz-user-select: none;
   word-wrap: break-word;
   vertical-align: middle;
   min-height: 1.5em;
   line-height: 1.5em;
-  margin-top: -1px;
 }
 
 .theme-firebug .theme-gutter.ruleview-header {
   font-family: var(--proportional-font-family);
   font-weight: bold;
   color: inherit;
   border: none;
   margin: 4px 0;
@@ -257,19 +250,24 @@
 }
 
 .ruleview-rule-pseudo-element {
   padding-left:20px;
   border-left: solid 10px;
 }
 
 .ruleview-rule {
+  border-bottom: 1px solid var(--theme-splitter-color);
   padding: 2px 4px;
 }
 
+#ruleview-container-focusable > .ruleview-rule:last-child {
+  border-bottom: none;
+}
+
 /**
  * Display rules that don't match the current selected element and uneditable
  * user agent styles differently
  */
 .ruleview-rule[unmatched=true],
 .ruleview-rule[uneditable=true] {
   background: var(--theme-tab-toolbar-background);
 }
@@ -322,23 +320,18 @@
 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer,
 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *,
 .theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden),
 .theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * {
   color: #CCCCCC;
 }
 
-.ruleview-rule + .ruleview-rule {
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
 .theme-firebug .ruleview-rule + .ruleview-rule {
-  border-top: none;
+  border-bottom: none;
 }
 
 .ruleview-warning {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   margin-inline-start: 5px;
   display: inline-block;
   width: 13px;