CSS - скругленные границы выглядят как две кнопки, перекрывающиеся

Question

Вот изображение:

Мой фон белый (вы можете увидеть небольшой промежуток между двумя углами двух разных кнопок).У меня на этом изображении 4 кнопки, а не 8 перекрывающихся

Фон кнопок весь черный, рамка белая.Кнопки имеют высоту 40 пикселей.

Я бы хотел, чтобы кнопки имели закругленные края / углы, а не черный ящик.Окно работает на Java.

Вот код CSS:

.button{
-fx-font-size: 12pt;
-fx-text-fill: #ffffff;
-fx-background-color: #000000;
-fx-border-radius: 20px;
-fx-border-color: #ffffff;
-border: 0px;
}

Answer 1

Предполагая, что единственный стиль, который применяется к Button s - это правило, которое вы определяете, достаточно установить свойство -fx-background-radius. Белые «точки» на углах кнопок заставляют меня усомниться в этом.

Следующее должно достичь желаемого поведения, хотя:

@Override
public void start(Stage primaryStage) {
    VBox vbox = new VBox();
    vbox.setStyle("-fx-background-color: blue;");

    for (int i = 0; i < 4; i++) {
        Button button = new Button(Integer.toString(i));
        button.getStyleClass().setAll("button");
        vbox.getChildren().add(button);
    }

    Scene scene = new Scene(vbox);
    scene.getStylesheets().add("style.css");
    primaryStage.setScene(scene);
    primaryStage.show();
}

style.css

.button {
    -fx-font-size: 12pt;
    -fx-text-fill: white;
    -fx-background-color: black;
    -fx-pref-width: 200px;
    -fx-pref-height: 40px;
    -fx-min-height: -fx-pref-height;
    -fx-max-height: -fx-pref-height;
    -fx-background-radius: 20px;
    -fx-border-radius: 20px;
    -fx-border-color: white;
}