So i am working on an App and in menu bar, I would like to give Menu elements some cool looking separators. So I found a way that seems to work with HTML:
.menu
{
border-right: 2px dotted #666666;
}
so I just put "-fx-", before "border-right..." and that didn't work. After some more reaserch I found that I should separate width, style and colour, so it should look like this:
.menu
{
-fx-border-right-width: 2px;
-fx-border-right-style: dotted;
-fx-border-right-color: #666666;
}
But again it fails to work. So is there a way to do it with border-right property of menu, or should I look for another way of doing this?
See the documentation. In JavaFX CSS, borders (and other properties) are specified either with a single value (representing the value for all sides), or four values delimited by whitespace (representing the values for top, right, bottom, and left.
So
.menu {
-fx-border-width: 0px 2px 0px 0px ;
-fx-border-color: #666666;
-fx-border-style: dotted;
}
should do what you are looking for.
Here is a quick test harness:
public class HelloApplication extends Application {
@Override
public void start(Stage stage) throws IOException {
BorderPane root = new BorderPane();
Region menu = new Region();
menu.getStyleClass().add("menu");
root.setCenter(menu);
BorderPane.setMargin(menu, new Insets(10));
Scene scene = new Scene(root, 800, 500);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
with style.css
containing the CSS code above. This gives