Can't get JavaFX Separator to style with a different color

Question

All I am trying to do, is add a separator in between elements in a VBox, but I want the separator line to be a different color than the default. Let's chose red for example.

The only CSS I could find that would change the line color is this:

.separator {
    -fx-padding: 8;
}

.separator .line {
    -fx-background-color: red;
    -fx-pref-height: 5;
}

But that seems to add a second line and it does not color the primary line as you can see here:

It needs to look like this:

Here is a working example showing the problem. If you run this code, you will need to add this to your POM file:

<dependency>
    <groupId>com.simtechdata</groupId>
    <artifactId>Switcher</artifactId>
    <version>1.3.4</version>
</dependency>

And create a CSS file called Separator.css and place it in the resources folder. The contents of the css file are already in this post (the first code snipped that I posted).

Here is the running class:

package sample;

import com.simtechdata.Switcher;
import javafx.application.Application;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class Main extends Application {

    private final       ClassLoader resource       = ClassLoader.getSystemClassLoader();
    @Override
    public void start(Stage primaryStage) throws Exception{
        String separatorCSS = resource.getResource("Separator.css").toExternalForm();        AnchorPane ap = new AnchorPane();
        ap.setPrefWidth(300);
        ap.setPrefHeight(400);
        Switcher.addScene(10,ap,300,400);
        ap.setStyle("-fx-background-color: black");
        Label label1 = new Label("Example Text");
        Label label2 = new Label("More Example Text");
        label1.setStyle("\t-fx-font-size: 24pt;\n" +
                       "\t-fx-font-family: \"Segoe UI Semibold\";\n" +
                       "\t-fx-text-fill: rgb(255,155,0);\n" +
                       "\t-fx-alignment: center;\n");
        label2.setStyle("\t-fx-font-size: 24pt;\n" +
                       "\t-fx-font-family: \"Segoe UI Semibold\";\n" +
                       "\t-fx-text-fill: rgb(255,155,0);\n" +
                       "\t-fx-alignment: center;\n");
        Separator separator = new Separator();
        separator.getStylesheets().add(separatorCSS);
        VBox vbox = new VBox();
        vbox.getChildren().addAll(label1,separator,label2);
        ap.getChildren().add(vbox);
        Switcher.showScene(10);
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Does anyone know how to change the color of a JavaFX Separator line either programmatically or by using CSS?

Thank you,

Mike Sims

Answer 1

By default, a Separator has a border (for a horizontal separator the border is on the top). This is the white line you're seeing.

Just remove the border, e.g.:

.separator .line {
    -fx-background-color: red;
    -fx-pref-height: 5;
    -fx-border-color: null ;
}