--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -2,16 +2,17 @@
 /* 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/. */
 %endif
 %filter substitution
 %define horizontalTabPadding 9px
 
 :root {
+  --tabs-top-border-width: 0px;
   --tab-toolbar-navbar-overlap: 1px;
   --tab-min-height: 33px;
   --tab-loading-fill: #0A84FF;
 }
 
 :root[uidensity=compact] {
   --tab-min-height: 29px;
 }
@@ -433,29 +434,33 @@ tabbrowser {
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
   background-clip: padding-box;
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
+#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar,
+%endif
+:root:not([tabsintitlebar]),
+:root[extradragspace] {
+  --tabs-top-border-width: 1px;
+}
+
+%ifdef MENUBAR_CAN_AUTOHIDE
+#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
+%endif
+:root:not([tabsintitlebar]) .tab-background,
+:root[extradragspace] .tab-background {
   border-top-style: solid;
 }
-%endif
 
 .tab-background[selected=true] {
-  border-left-style: solid;
-  border-right-style: solid;
-  border-color: var(--tabs-border);
-  border-image: linear-gradient(var(--tabs-border),
-                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
-                                transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap)));
-  border-image-slice: 1;
+  border-top-color: var(--tabs-border);
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
 /* Hide the selected tab's start border when it's adjacent to the window border
    or to .titlebar-placeholder[type="pre-tabs"] which has its own border. */
 %ifdef CAN_DRAW_IN_TITLEBAR
@@ -550,50 +555,64 @@ tabbrowser {
 
 .titlebar-placeholder[type="pre-tabs"] {
   border-inline-end: 1px solid;
   opacity: 0.2;
 }
 
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
-  margin-inline-start: -1px;
   border-left: 1px solid;
   /* Vertical margin doesn't work here for positioned pinned tabs, see
      bug 1198236 and bug 1300410. We're using linear-gradient instead
      to cut off the border at the top and at the bottom. */
   border-image: linear-gradient(transparent 6px,
                                 currentColor 6px,
                                 currentColor calc(100% - 5px),
                                 transparent calc(100% - 5px));
   border-image-slice: 1;
-  /* The 1px border and negative margin may amount to a different number of
-     device pixels (bug 477157), so we also set a width to match the margin. */
-  width: 1px;
-  box-sizing: border-box;
-  opacity: 0.2;
+  opacity: 0.3;
 }
 
 %ifdef CAN_DRAW_IN_TITLEBAR
 %ifdef MENUBAR_CAN_AUTOHIDE
 :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
-:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before,
 %else
 :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
-:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before,
 %endif
-{
-  border-image: none;
-}
 %endif
+/* Show full height tab separators on hover. */
+.tabbrowser-tab:hover::before,
+.tabbrowser-tab[last-visible-tab]:hover::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[afterhovered]::before {
+  border-image: linear-gradient(transparent calc(1px + var(--tabs-top-border-width)),
+                                currentColor calc(1px + var(--tabs-top-border-width)),
+                                currentColor calc(100% - 1px),
+                                transparent calc(100% - 1px));
+  border-image-slice: 1;
+}
 
+/* Show full height tab separators on selected tabs. */
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[afterselected]::before,
+.tabbrowser-tab[visuallyselected]::before,
+.tabbrowser-tab[visuallyselected]::after {
+  border-color: var(--tabs-border);
+  border-image: linear-gradient(transparent 1px,
+                                var(--tabs-border) 1px,
+                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap))) 1 !important;
+  opacity: 1;
+}
+
+.tabbrowser-tab:not([first-visible-tab])::before,
+#tabbrowser-tabs:not([overflow]):not([movingtab]) > .tabbrowser-tab[last-visible-tab]::after,
 /* Also show separators beside the selected tab when dragging it. */
-#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
+#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::after {
   content: "";
   display: -moz-box;
 }
 
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -117,28 +117,43 @@
       --tabs-border: @glassShadowColor@;
     }
 
     #TabsToolbar:not(:-moz-lwtheme) {
       color: hsl(240,9%,98%);
     }
 
     /* Always show full-height tab separators on tabs with borders. */
-    .tabbrowser-tab:not(:-moz-lwtheme)::before {
+    .tabbrowser-tab:not(:-moz-lwtheme)::before,
+    .tabbrowser-tab:not(:-moz-lwtheme)::after {
       border-image: none !important;
     }
 
-    /* Show the tabs toolbar background color inside tabs on Win 7. */
-    .tab-background:not(:-moz-lwtheme):not([selected=true]) {
+    /* Show border on tabs with background colors and
+     * show the tabs toolbar background color inside tabs. */
+    .tabbrowser-tab:not(:-moz-lwtheme) {
       background-color: hsl(235,33%,19%) !important;
+      border-top: 1px solid var(--tabs-border);
+      background-clip: padding-box;
     }
 
-    /* Show border on tabs with background colors in Windows 7. */
+    /* The top border on top of the tab background is replaced
+     * by the slightly transparent outside tabs-border. */
     .tab-background:not(:-moz-lwtheme) {
-      border-top: 1px solid var(--tabs-border);
+      border-top-style: none !important;
+    }
+
+    /* The border at the end of the tab strip is replaced
+     * by the slightly transparent outside tabs-border. */
+    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
+      border-inline-end: 1px solid var(--tabs-border);
+    }
+
+    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
+      display: none !important;
     }
   }
 }
 
 @media (-moz-windows-compositor: 0),
        (-moz-windows-default-theme: 0) {
   /* Please keep the menu text colors in this media block in sync with
    * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.

--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -60,28 +60,43 @@
        (-moz-os-version: windows-win8) {
   @media (-moz-windows-compositor) {
     #main-window {
       background: transparent !important;
     }
   }
 
   /* Always show full-height tab separators on tabs with borders. */
-  .tabbrowser-tab::before {
+  .tabbrowser-tab::before,
+  .tabbrowser-tab::after {
     border-image: none !important;
   }
 
-  /* Show the tabs toolbar background color inside tabs on Win 7. */
-  .tab-background:not([selected=true]) {
+  /* Show border on tabs with background colors and
+   * show the tabs toolbar background color inside tabs. */
+  .tabbrowser-tab {
     background-color: var(--chrome-background-color) !important;
+    border-top: 1px solid var(--tabs-border);
+    background-clip: padding-box;
   }
 
-  /* Show border on tabs with background colors in Windows 7. */
+  /* The top border on top of the tab background is replaced
+   * by the slightly transparent outside tabs-border. */
   .tab-background {
-    border-top: 1px solid var(--tabs-border);
+    border-top-style: none !important;
+  }
+
+  /* The border at the end of the tab strip is replaced
+   * by the slightly transparent outside tabs-border. */
+  .tabbrowser-tab[last-visible-tab] {
+    border-inline-end: 1px solid var(--tabs-border);
+  }
+
+  .tabbrowser-tab[last-visible-tab]::after {
+    display: none !important;
   }
 
   /* Use default window colors when in non-maximized mode */
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;