CSS - Rounded borders look like two buttons overlapping
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;
Please provide a Minimal, Complete, and Verifiable example that demonstrates the problem.
– kleopatra
Sep 11 '18 at 9:34
Thank you all, the problem has been resolved (-fx-background-radius added). The window in the image had no css applied to it, so everything was set to default (hence the white background you can see behind the buttons, in fabian's example the background was blue)
– Hydraxia
Sep 12 '18 at 5:23
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;
Thank you very much for the help! It was the -fx-background-radius that helped to remove the extra corners and make the buttons look really round
– Hydraxia
Sep 12 '18 at 5:20
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.
can you provide all the css for that window please?
– sij_a
Sep 11 '18 at 8:58