Create solid separator

Question

I have looked around quite a bit and cannot find the solution.

I am adding a separator in SceneBuilder. This is easy. Now I want this separator to be a solid line.

This I am having issues with. I have tried :

-fx-border-style: solid;
-fx-border-width: 1px;

But this doesn't seem to work or any combination of this.

Antihelix

Answer 1

i think you missed line part in below css

.separator *.line { 
-fx-border-style: solid;
-fx-border-width: 1px;

}

with boarder width 5px

Tip : use CSS Analayzer to know css class/selector for particular part of node, you can find css analyzer in scenebuilder 1.1 view -> Show css Analyzer or ctrl+6 shortcut in windows.

Josephus

Thanks! got it to work. Thanks for the tip regarding the CSS Analyzer. – Antihelix

I can't seem to get a 1px border. Smallest that gets rendered seems to be a 2px border. – Mogul

@crush: I guess because the border is on both sides (1+1). – Intricacy

Answer 2

Its the solution of your problem, which was my problem too:

.separator *.line {
    -fx-border-style: solid;
    -fx-border-width: 0 0 1 0; /* its make really one-pixel-border */
    -fx-border-color: red;
}

Fanatical

Answer 3

None of the other answers worked for me. I finally gave it a negative padding as I noticed the divider forms a rectangle and it worked like a charm.

.separator *.line{
    -fx-border-style: solid;
    -fx-padding: 0 -50 0 0;
}

Falito

Answer 4

I didn't want to change all of my separators, just that one, so I needed it as a custom class (chose "blackSeparator" here). Additionally I found out that I don't need the * wildcard and the pixel-width needs to be 0.5px to get it 1 pixel width.

The solution:

    .blackSeparator.separator .line {
        -fx-border-width: 0.5px;
        -fx-border-color: black;
    }

Millenarian