title: Adding borders to GridPane JavaFX
body: <p>I am creating a board game in JavaFX using GridPane.</p>
  
  <p>There are 7 different animations which could be placed in each grid (cell) of the grid.</p>
  
  <p>Initially the grid looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/bsp3f.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/bsp3f.jpg" alt="empty gridpane"></a></p>
  
  <p>I tested adding a simple circle to it before programming my animation insertions. And it looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/76dpy.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/76dpy.jpg" alt="gridpane with subscenes"></a></p>
  
  <p><a href="https://i.stack.imgur.com/dMQ0r.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/dMQ0r.jpg" alt="enter image description here"></a></p>
  
  <p>The nodes added are SubScenes which include TimeLine animation. Each cell size is 40x40 and the SubScene size is also 40x40.</p>
  
  <p>The subscenes when added, get on top of the gridpane border lines and it doesn't look good.</p>
  
  <p>What can I do so that the nodes are added below the grid lines? i.e. the gridlines are on top of the nodes.</p>
  
  <p>If it is not possible with GridPane, is there anything else I can use?</p>
  
  <p>class which i execute for the game</p>
  
  <pre><code>class Game {
      static GridPane grid;
      public void start(final Stage stage) throws Exception {
          int rows = 5;
          int columns = 5;
  
          stage.setTitle("Enjoy your game");
          grid = new GridPane();
          for(int i = 0; i &lt; columns; i++) {
              ColumnConstraints column = new ColumnConstraints(40);
              grid.getColumnConstraints().add(column);
          }
  
          for(int i = 0; i &lt; rows; i++) {
              RowConstraints row = new RowConstraints(40);
              grid.getRowConstraints().add(row);
          }
  
          grid.setOnMouseReleased(new EventHandler&lt;MouseEvent&gt; () {
              public void handle(MouseEvent me) {
                  grid.add(Anims.getAnim(1), (int)((me.getSceneX() - (me.getSceneX() % 40)) / 40), (int)((me.getSceneY() - (me.getSceneY() % 40)) / 40)); //here the getAnim argument could be between 1-7
              }
          });
  
          grid.setStyle("-fx-background-color: white; -fx-grid-lines-visible: true");
          Scene scene = new Scene(grid, (columns * 40) + 100, (rows * 40) + 100, Color.WHITE);
          stage.setScene(scene);
          stage.show();
      }
  
      public static void main(final String[] arguments) {
          Application.launch(arguments);
      }
  }
  </code></pre>
  
  <p>class which contains animations, here I am just creating a circle</p>
  
  <pre><code>public class Anims {
  
      public static SubScene getAnim(final int number) throws Exception {
          Circle circle = new Circle(20, 20f, 7);
          circle.setFill(Color.RED);
          Group group = new Group();
          group.getChildren().add(circle);
          SubScene scene = new SubScene(group, 40, 40);
          scene.setFill(Color.WHITE);
          return scene;
      }
  }
  </code></pre>