title: How do I get rid of the border around a split pane in JavaFX?
body: <p>I'm using the JavaFX SceneBuilder, but I'll paste the FXML below since it's short.  I have a very simple window with a split pane inside an anchor pane.  Here is the FXML:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml"&gt;
    &lt;children&gt;
      &lt;SplitPane id="main-split-pane" dividerPositions="0.25" focusTraversable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="-1.0" prefWidth="-1.0" style="" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
        &lt;items&gt;
          &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" style="" /&gt;
          &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" /&gt;
        &lt;/items&gt;
      &lt;/SplitPane&gt;
    &lt;/children&gt;
    &lt;padding&gt;
      &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
    &lt;/padding&gt;
    &lt;stylesheets&gt;
      &lt;URL value="@main-view.css" /&gt;
    &lt;/stylesheets&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p>I'm using the following CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#main-split-pane {
      -fx-border-style: none;
      -fx-border-color: blue;
      -fx-border-width: 25;
  }
  </code></pre>
  
  <p>It gives me a windows like this:</p>
  
  <p><img src="https://i.stack.imgur.com/IJax4.png" alt=""></p>
  
  <p>I've played around with the CSS settings shown <a href="http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region" rel="noreferrer">here</a>, but there are a few things I'm having trouble understanding:</p>
  
  <ol>
  <li>Where is the border I've marked with the red arrow coming from?</li>
  <li>Why does setting the <code>-fx-border-style</code> to <code>none</code> cause the <code>-fx-border-color</code> to be ignored while the <code>-fx-border-width</code> still has an effect (like padding) on how things look?</li>
  </ol>