CSS - Rounded borders look like two buttons overlapping

Here is the picture:

My background is white (you can see the little gap between the two corners of two different buttons). I have 4 buttons in that picture, not 8 overlapping

The buttons' backgrounds are all black, the border is white. The buttons are 40px in height.

I would like the buttons to have rounded edges/corners, not to be a black box. The window is running on Java.

Here is the CSS code:

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



1 Answer
1

Assuming the only style that applies to the Buttons is the rule you define, it's sufficient to set the -fx-background-radius property. The white "dots" at the corners of the buttons make me doubt this.

Button

-fx-background-radius

The following should achieve the desired behaviour though:

@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();



.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;



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.