How to make AnchorPane rounded inside another AnchorPane

Question

As the title says I have created a root AnchorPane in which two AnchorPanes are placed the upper AnchorPane somehow gets rounded but in case of lower one, the upper side is rounded whereas the lower side remains edged.

Java Code:

package application;

import javafx.application.*;
import javafx.event.*;
import javafx.fxml.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;

public class Main extends Application {
    private double xOffset = 0;
    private double yOffset = 0;
    public void start(Stage primaryStage) 
    {
        try 
        {
            primaryStage.initStyle(StageStyle.TRANSPARENT);
            AnchorPane root = FXMLLoader.load(getClass().getResource("load.fxml"));
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            scene.setFill(javafx.scene.paint.Color.TRANSPARENT);
            primaryStage.setScene(scene);

            primaryStage.show();

            root.setOnMousePressed(new EventHandler<MouseEvent>() 
            {
                public void handle(MouseEvent e)
                {
                    xOffset = e.getSceneX();
                    yOffset = e.getSceneY();

                }
            });

            root.setOnMouseDragged(new EventHandler<MouseEvent>() 
            {
                public void handle(MouseEvent e) 
                {
                    primaryStage.setX(e.getScreenX() - xOffset);
                    primaryStage.setY(e.getScreenY() - yOffset);
                }
            });

        }
        catch(Exception e) 
        {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Most of the Designing part is done using Scene Builder in fxml file

FXML Code:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="root" prefHeight="452.0" prefWidth="362.0" style="-fx-background-color: transparent; -fx-background-radius: 30; -fx-border-radius: 30;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="70.0" prefWidth="362.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30; -fx-border-radius: 30;" />
      <AnchorPane fx:id="pg1" layoutY="80.0" prefHeight="373.0" prefWidth="362.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30;" />
   </children>
</AnchorPane>

Answer 1

Works fine for me (until I resize the window to make the scene smaller than the preferred size of the root). Note that you haven't produced a responsive layout there.

If you want to wrap everything in an AnchorPane , replace layoutY="80.0" with AnchorPane.topAnchor="80" AnchorPane.bottomAnchor="0" and the bottom AnchorPane will shrink/grow when resizing the window vertically.

Note though that there is a simpler way to produce this kind of layout (the responsive version) that using AnchorPane : Just use a VBox :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<VBox fx:id="root" spacing="10" prefHeight="452.0" prefWidth="362.0" style="-fx-background-color: transparent; -fx-background-radius: 30; -fx-border-radius: 30;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="70.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30; -fx-border-radius: 30;" />
      <AnchorPane fx:id="pg1" VBox.vgrow="ALWAYS" style="-fx-background-color: #3D4956; -fx-background-radius: 30;" />
   </children>
</VBox>

VBox.vgrow="ALWAYS" results in the second AnchorPane being grown to the space remaining in the VBox .