Question

I like the 3D effect of a JTextField with Borders created by BorderFactory.createLoweredBevelBorder(). Now that I’m working with JavaFX instead, the L&F of the border is controlled by CSS. And the default look is just a simple line stroke border. I figured out how to edit the CSS file to thicken the border and change its color:

.text-field { -fx-border-color: color; -fx-border-width: #; }

But if you look at a Swing-generated lowered bevel effect it is created by having different colors on 2 of the 4 sides and having the edge barrier at a 45 degree angle. So how do I accomplish that with CSS?

Answer 1

The JavaFX CSS Reference Guide says:

While the JavaFX CSS parser will parse valid CSS syntax, it is not a
fully compliant CSS parser. One should not expect the parser to handle
syntax not specified in this document.

border or border-top and others are ones in this unsupported category.
To have a lowered bevel border try

.text-field {
    -fx-border-insets: 0;
    -fx-border-width: 2px;
    -fx-border-color: black lightgray lightgray black;
}

Or try with JavaFX-style way using inner shadow

.text-field {
    -fx-effect: innershadow(three-pass-box, gray, 12 , 0.5, 1, 1);
}

However the real style you wanted can be achieved by -fx-border-style attribute IMO. Refer to it in over mentioned guide.