How to use Partial Border with CSS in javaFX?

Question

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?

Answer 1

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