does JavaFX css have a way to stop background color getting over the border edges?

Question

I'm trying to make a card like the bootstrap CSS, but using JavaFX components. I want a rounded border but the background color of the top part (the header) is giving me problems.

The background overflows the border and looks quite ugly. I've googled a bit and found that an overflow:hidden on the background color should solve it. JavaFX css doesn't seem to have that though. Is there another way of solving this?

My solution so far:

Answer 1

As described in the JavaFX CSS Reference Guide, overflow is not supported.

JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code. In addition, CSS support for HTML-specific elements such as Tables are not supported since there is no equivalent construct in JavaFX.

However, to solve the rounded-background issue you can use -fx-background-radius along with -fx-border-radius. They should be the same value. You can find it here in the reference guide.

---

Here's an example of a bootstrap-like card that I think you are trying to make. You would use -fx-background-radius: <top-left> <top-right> <bottom-right> <bottom-left>; which would be -fx-background-radius: 10 10 0 0;

public class Card extends StackPane {
    public BorderPane border = new BorderPane();
    public StackPane header = new StackPane(), content = new StackPane();
    public Card() {
        setAlignment(Pos.CENTER);
        getChildren().add(border);
        border.setTop(header);
        border.setCenter(content);
        border.setStyle("-fx-border-color: cornflowerblue; -fx-border-radius: 10; ");
        header.setStyle("-fx-background-color: derive(cornflowerblue, 70%); -fx-background-radius: 10 10 0 0; ");
        header.setMinWidth(100);
        header.setMinHeight(80);
        content.setMinWidth(100);
        content.setMinHeight(100);
    }

    public BorderPane getCard() {
        return border;
    }

    public StackPane getHeader() {
        return header;
    }

    public StackPane getContent() {
        return content;
    }
}

public void start(Stage stage) throws Exception {
    Card card = new Card();
    card.setPadding(new Insets(10,10,10,10));

    GridPane grid = new GridPane();
    grid.setVgap(10); grid.setHgap(10);
    grid.setAlignment(Pos.CENTER);
    grid.addRow(0, new Label("Username"), new TextField());
    grid.addRow(1, new Label("Password"), new PasswordField());
    grid.addRow(2, new Button("Submit"));
    card.getContent().getChildren().add(grid);

    Label title = new Label("Card Example");
    title.setFont(Font.font("Tahoma", FontWeight.SEMI_BOLD, 36));
    card.getHeader().getChildren().add(title);

    StackPane stack = new StackPane();
    stack.setAlignment(Pos.CENTER);
    stack.getChildren().add(card);

    Scene scene = new Scene(stack, 500, 300);
    stage.setTitle("Boostrap-like Card Example");
    stage.setScene(scene);
    stage.show();
}