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.

invariant · Accepted Answer · 2013-01-16T14:56:28.733

18

i think you missed line part in below css

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

}

with boarder width 5px

enter image description here

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.

edited Jan 16 '13 at 14:56

answered Jan 16 '13 at 00:15

invariant

8,758
9
47
61

Thanks! got it to work. Thanks for the tip regarding the `CSS Analyzer`. – blo0p3r Jan 16 '13 at 14:41
1

I can't seem to get a 1px border. Smallest that gets rendered seems to be a 2px border. – crush Feb 21 '14 at 15:50
@crush: I guess because the border is on both sides (1+1). – No3x Apr 17 '18 at 11:49

score 14 · Answer 2 · edited Jun 04 '15 at 06:05

14

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;
}

edited Jun 04 '15 at 06:05

Syeda Zunaira

5,191
3
38
70

answered Jun 04 '15 at 05:08

Fattan Labs

141
1
2

score 0 · Answer 3 · answered Sep 05 '18 at 20:04

0

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;
}

answered Sep 05 '18 at 20:04

Mantas Visockis

126
2
2

score 0 · Answer 4 · answered Nov 08 '21 at 12:19

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;
    }

Create solid separator

4 Answers4