title: GridPane with titled border
body: <p>I'm trying to put a titled border around my <code>GridPane</code> and I'm having an issue with the border being on top title. Also I wonder which container will be the best for my problem. <code>GridPane</code> seems problematic here. Any easier way to do it?</p>
  <p>Current result:</p>
  <p><a href="https://i.stack.imgur.com/xi5cH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xi5cH.png" alt="screen capture" /></a></p>
  <pre><code>public void start(Stage primaryStage) {
          try {
                 primaryStage.setTitle(&quot;GridPane&quot;);
                  
                  BorderPane root = new BorderPane();
                  Scene scene = new Scene(root, 300, 210);
                  
                  GridPane grd =new GridPane();
                  ColumnConstraints column1width = new ColumnConstraints(50);
                  ColumnConstraints column2width = new ColumnConstraints(70);
                  ColumnConstraints column3width = new ColumnConstraints(70);
                  RowConstraints row1Height = new RowConstraints(30);
                  grd.getColumnConstraints().addAll(column1width, column2width, column3width);
                  grd.getRowConstraints().add(row1Height);
  
                  Label source = new Label(&quot;Source&quot;);
                  Label report = new Label(&quot;Report&quot;);
                  TextField text1 = new TextField();
                  TextField text2 = new TextField(&quot;report.txt&quot;);
                  Button browse1 = new Button(&quot;Browse...&quot;);
                  Button browse2 = new Button(&quot;Browse...&quot;);
                  grd.setVgap(10);
                  grd.setHgap(10);
                  grd.setPadding(new Insets(10, 10, 10, 10));
                  
                  text1.setPrefSize(80, 20);
                  text2.setPrefSize(80, 20);
                  browse1.setPrefSize(80, 20);
                  browse2.setPrefSize(80, 20);
                  
                  Label textIO = new Label(&quot;Text IO zone&quot;);
                  textIO.getStyleClass().add(&quot;title&quot;);
                  textIO.setPadding(new Insets(-40, -20, 0, 0));
                  
                  textIO.setPrefWidth(120);      
                  grd.add(textIO, 0, 0);
                  grd.add(source, 0, 0);
                  grd.add(text1, 1, 0);
                  grd.add(browse1, 2, 0);
                  grd.add(report, 0, 1);
                  grd.add(text2, 1, 1);
                  grd.add(browse2, 2, 1);
  
                  grd.getStyleClass().add(&quot;border&quot;);
                  
                  grd.prefHeightProperty().bind(root.heightProperty());
                  
                  root.getStyleClass().add(&quot;color&quot;);
                  root.setLeft(grd);
                  scene.getStylesheets().add(getClass().getResource(&quot;application.css&quot;).toExternalForm());
                  primaryStage.setScene(scene);
                  primaryStage.setMinHeight(250);
                  primaryStage.setMinWidth(410);
                  primaryStage.show();
          } catch(Exception e) {
              e.printStackTrace();
          }
      }
  </code></pre>
  <p>And css styles.</p>
  <pre class="lang-none prettyprint-override"><code>/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
  
      .title {
         -fx-background-color: aliceblue;
         -fx-translate-y: -5;
         -fx-content-display: bottom; 
      }
      .border {
         -fx-border-insets: 5;
         -fx-border-color: black;
      }
      .color{
          -fx-background-color: aliceblue;
      }
  </code></pre>