javafxjavafx-css

How to use Partial Border with CSS in javaFX?


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?


Solution

  • 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

    enter image description here