title: JavaFX border correct width in Scene Builder but not on running program
body: <p><strong>The Problem:</strong>
  I have a HBox called MenuContainer within which I have a MenuBar, I have used FXML to lay things out and CSS to style. I want a 1px border beneath my MenuContainer so I gave it the style: "-fx-border-width: 0px 0px 1px 0px; -fx-border-color: black;" I know that the style sheet is properly set up as I have styled other elements within my project. 
  My problem is that the border does not appear, with further experimentation I have found that the border starts to show when I increase the border width to 5px the border shows as what it should be (1px). I have spent hours trying to find a fix that isn't just setting the width to 5px as I don't know if this will work on different screen sizes and I am unhappy with such a lazy fix.
  Interestingly enough when I view the layout in FXML's scene builder the border displays correctly however when I run the program it is not there, attatched are screenshots of this.<a href="https://i.stack.imgur.com/qM0VJ.png" rel="nofollow noreferrer">Executed Program</a>. <a href="https://i.stack.imgur.com/PD580.png" rel="nofollow noreferrer">In Scene Builder</a></p>
  
  <p><strong>The Relevant Code:</strong>
  <strong>FXML</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.net.URL?&gt;
  &lt;?import javafx.geometry.Insets?&gt;
  &lt;?import javafx.scene.canvas.Canvas?&gt;
  &lt;?import javafx.scene.control.Accordion?&gt;
  &lt;?import javafx.scene.control.Button?&gt;
  &lt;?import javafx.scene.control.Menu?&gt;
  &lt;?import javafx.scene.control.MenuBar?&gt;
  &lt;?import javafx.scene.control.MenuItem?&gt;
  &lt;?import javafx.scene.control.ScrollPane?&gt;
  &lt;?import javafx.scene.control.Separator?&gt;
  &lt;?import javafx.scene.control.TitledPane?&gt;
  &lt;?import javafx.scene.control.Tooltip?&gt;
  &lt;?import javafx.scene.layout.ColumnConstraints?&gt;
  &lt;?import javafx.scene.layout.GridPane?&gt;
  &lt;?import javafx.scene.layout.HBox?&gt;
  &lt;?import javafx.scene.layout.RowConstraints?&gt;
  &lt;?import javafx.scene.layout.VBox?&gt;
  
  &lt;GridPane fx:id="mainGridPane" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="code.controllers.MainScreenController"&gt;
  
  
      &lt;children&gt;
  
          &lt;!-- menu at the top of screen --&gt;
          &lt;HBox fx:id="menuContainer" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="0" GridPane.hgrow="ALWAYS"&gt;
              &lt;MenuBar fx:id="menuBar" HBox.hgrow="ALWAYS"&gt;
                  &lt;menus&gt;
                      &lt;Menu text="File"&gt;
                          &lt;MenuItem text="New" /&gt;
                          &lt;MenuItem text="Open" /&gt;
                          &lt;MenuItem text="Save" /&gt;
                      &lt;/Menu&gt;
                      &lt;Menu text="Edit"&gt;
  
                      &lt;/Menu&gt;
                  &lt;/menus&gt;
              &lt;/MenuBar&gt;
          &lt;/HBox&gt;
  
          &lt;!--the toolbar--&gt;
          &lt;HBox fx:id="toolBar" alignment="CENTER_LEFT" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="1"&gt;
              &lt;Button fx:id="undoButton" styleClass="toolButton"&gt;
                  &lt;tooltip&gt;
                      &lt;Tooltip text="Undo" /&gt;
                  &lt;/tooltip&gt;
                  &lt;HBox.margin&gt;
                      &lt;Insets left="15.0" /&gt;
                  &lt;/HBox.margin&gt;
              &lt;/Button&gt;
              &lt;Button fx:id="redoButton" styleClass="toolButton"&gt;
                  &lt;tooltip&gt;
                      &lt;Tooltip text="Redo" /&gt;
                  &lt;/tooltip&gt;
                  &lt;HBox.margin&gt;
                      &lt;Insets right="15.0" /&gt;
                  &lt;/HBox.margin&gt;
              &lt;/Button&gt;
              &lt;Separator orientation="VERTICAL" /&gt;
              &lt;Button fx:id="drawButton" styleClass="toolButton"&gt;
                  &lt;tooltip&gt;
                      &lt;Tooltip text="Draw" /&gt;
                  &lt;/tooltip&gt;
                  &lt;HBox.margin&gt;
                      &lt;Insets left="15.0" /&gt;
                  &lt;/HBox.margin&gt;
              &lt;/Button&gt;
              &lt;Button fx:id="cursorButton" styleClass="toolButton"&gt;
                  &lt;tooltip&gt;
                      &lt;Tooltip text="Move" /&gt;
                  &lt;/tooltip&gt;
              &lt;/Button&gt;
          &lt;/HBox&gt;
  
  
          &lt;Canvas fx:id="mainCanvas" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2" GridPane.valignment="TOP" /&gt;
  
          &lt;!-- pane at left hand side of screen --&gt;
          &lt;VBox fx:id="sidePane" GridPane.columnIndex="0" GridPane.rowIndex="2"&gt;
  
              &lt;ScrollPane hbarPolicy="NEVER" styleClass="secondaryContainer"&gt;
                  &lt;Accordion fx:id="componentAccordion" style="-fx-background-color: #3c3f41"&gt;
                      &lt;panes&gt;
                          &lt;TitledPane text="Inputs"&gt;
                              &lt;Button styleClass="componentButton" /&gt;
                          &lt;/TitledPane&gt;
  
                          &lt;TitledPane text="Outputs"&gt;
  
                          &lt;/TitledPane&gt;
  
                          &lt;TitledPane text="Logic Gates"&gt;
  
                          &lt;/TitledPane&gt;
                      &lt;/panes&gt;
                  &lt;/Accordion&gt;
              &lt;/ScrollPane&gt;
  
          &lt;/VBox&gt;
  
      &lt;/children&gt;
  
      &lt;!--These properties dynamically size the components to the screen size--&gt;
      &lt;columnConstraints&gt;
          &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" /&gt;
          &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" /&gt;
        &lt;ColumnConstraints /&gt;
      &lt;/columnConstraints&gt;
      &lt;rowConstraints&gt;
          &lt;RowConstraints percentHeight="3.0" vgrow="NEVER" /&gt;
          &lt;RowConstraints percentHeight="5.0" vgrow="NEVER" /&gt;
          &lt;RowConstraints percentHeight="92.0" vgrow="NEVER" /&gt;
        &lt;RowConstraints /&gt;
      &lt;/rowConstraints&gt;
  
      &lt;!-- points to the stylesheet that this markup file is using--&gt;
      &lt;stylesheets&gt;
          &lt;URL value="@../css/mainStyle.css" /&gt;
      &lt;/stylesheets&gt;
  &lt;/GridPane&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#menuContainer {
      -fx-background-color: #3c3f41;
      -fx-border-width: 0px 0px 1px 0px;
      -fx-border-color: black;
  }
  #menuBar {
      -fx-background-color: #3c3f41;
  }
  
  #toolBar {
      -fx-background-color: #3c3f41;
      -fx-border-width: 1px 0px 0px 0px;
      -fx-border-color: #585d5f;
  }
  </code></pre>