--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -155,19 +155,17 @@ var TabsInTitlebar = {
           menubar.getAttribute("autohide") != "true")) {
         $("titlebar-buttonbox").style.removeProperty("height");
       }
 
       // Try to avoid reflows in this code by calculating dimensions first and
       // then later set the properties affecting layout together in a batch.
 
       // Get the height of the tabs toolbar:
-      let tabsToolbar = $("TabsToolbar");
-      let tabsStyles = window.getComputedStyle(tabsToolbar);
-      let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles);
+      let fullTabsHeight = rect($("TabsToolbar")).height;
 
       // Buttons first:
       let captionButtonsBoxWidth = rect($("titlebar-buttonbox-container")).width;
 
       let secondaryButtonsWidth, menuHeight, fullMenuHeight, menuStyles;
       if (AppConstants.platform == "macosx") {
         secondaryButtonsWidth = rect($("titlebar-secondary-buttonbox")).width;
         // No need to look up the menubar stuff on OS X:

--- a/browser/base/content/test/performance/browser_windowopen_reflows.js
+++ b/browser/base/content/test/performance/browser_windowopen_reflows.js
@@ -70,26 +70,16 @@ if (Services.appinfo.OS == "WINNT") {
     },
   );
 }
 
 if (Services.appinfo.OS == "WINNT" || Services.appinfo.OS == "Darwin") {
   EXPECTED_REFLOWS.push(
     {
       stack: [
-        "verticalMargins@chrome://browser/content/browser-tabsintitlebar.js",
-        "_update@chrome://browser/content/browser-tabsintitlebar.js",
-        "init@chrome://browser/content/browser-tabsintitlebar.js",
-        "handleEvent@chrome://browser/content/tabbrowser.xml",
-      ],
-      times: 2, // This number should only ever go down - never up.
-    },
-
-    {
-      stack: [
         "rect@chrome://browser/content/browser-tabsintitlebar.js",
         "_update@chrome://browser/content/browser-tabsintitlebar.js",
         "init@chrome://browser/content/browser-tabsintitlebar.js",
         "handleEvent@chrome://browser/content/tabbrowser.xml",
       ],
       times: 4, // This number should only ever go down - never up.
     },
   );

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -60,21 +60,19 @@
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   color: var(--toolbar-color, inherit);
   -moz-appearance: none;
   border-style: none;
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  border-top: 1px solid var(--tabs-border) !important;
-  background-clip: padding-box;
-  /* Position the toolbar above the bottom of background tabs */
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
+  /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
-  z-index: 1;
 }
 
 #nav-bar {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
 #browser-bottombox {
@@ -535,17 +533,16 @@ html|span.ac-emphasize-text-url {
 #tabbrowser-tabs {
   /* override the global style to allow the selected tab to be above the nav-bar */
   z-index: auto;
 }
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: menubar;
   color: -moz-menubartext;
 }
 
 #nav-bar {

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -106,17 +106,17 @@
   height: 22px; /* The native titlebar on OS X is 22px tall. */
 }
 
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
  * tabstrip can overlap it.
  */
 #main-window[tabsintitlebar] > #titlebar {
-  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
+  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
 }
 
 /** End titlebar **/
 
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
@@ -126,18 +126,17 @@
   color: var(--toolbar-color, inherit);
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
-  border-top: 1px solid var(--tabs-border);
-  background-clip: padding-box;
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 /* Always draw a border on Yosemite to ensure the border is well-defined there
  * (the default border is too light). */
 @media (-moz-mac-yosemite-theme) {
@@ -806,18 +805,16 @@ html|span.ac-emphasize-text-url {
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 #TabsToolbar {
   -moz-appearance: none;
-  /* overlap the nav-bar's top border */
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
   padding-top: var(--space-above-tabbar);
 }
 
 :root:not([customizing]):not([tabsintitlebar]):not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -248,27 +248,26 @@
   /* End classic titlebar gradient */
 
   #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  /* Position the toolbar above the bottom of background tabs */
+  /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
-  z-index: 1;
 }
 
 #nav-bar {
-  border-top: 1px solid var(--tabs-border) !important;
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
 }
 @media (-moz-windows-compositor: 0) {
   #TabsToolbar[collapsed="true"] + #nav-bar {
-    border-top-style: none !important;
+    box-shadow: none;
   }
 }
 
 #print-preview-toolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbox;
 }
 
 #browser-bottombox:not(:-moz-lwtheme) {
@@ -772,17 +771,16 @@ html|span.ac-emphasize-text-url {
   text-shadow: none;
 }
 
 /* Tabstrip */
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 %include ../shared/tabs.inc.css
 
 /* tabbrowser-tab focus ring */
 .tabbrowser-tab:focus > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;