--- a/browser/themes/osx/devedition.css
+++ b/browser/themes/osx/devedition.css
@@ -36,16 +36,28 @@
   height: 24px !important;
   box-shadow: none !important;
   border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   background: var(--chrome-nav-buttons-background) !important;
 }
 
 #forward-button {
   -moz-border-start: none !important;
+  /* browser.css and friends set up the width of the button to be 32px.
+   * They then set margin-left to -2px to ensure the button is not too wide
+   * compared to the back button, and set padding-left to center the icon
+   * correctly.
+   * In our theme, the back and forward buttons are the same width, with the
+   * back button being 32px with 1px border on both sides. To ensure the
+   * forward button's content box looks like it is the same size with width
+   * set to 32px and a 1px border on only 1 side, we overlap by 1px, so both
+   * buttons end up with a content box that looks like it's 30px.
+   */
+  margin-left: -1px;
+  padding-left: 1px;
 }
 
 #forward-button > .toolbarbutton-icon {
   margin-left: 0;
   margin-right: 0;
 }
 
 #back-button:hover:not([disabled="true"]),