JavaFX: Border not rendered correctly for button

Question

Recently I noticed that the buttons in my application are not rendering correctly.

In this example, the button has gray border. The problem is that the background of the button is bigger than the bounds of the border.

How do I make the border appear just outside the bounds of the background?

Answer 1

Okay, I looked through my whole project and changed the CSS all over the places... Then I realized something - that extra space that looks like the button's background fill, is not actually that.

I added this to my stylesheet:

.root
{
    -fx-shadow-highlight-color: red;
}

And surprisingly, this is how it looks like now:

So it's actually a shadow for the button. Most of the time it's not obvious because this is how Modena.css defines it:

-fx-shadow-highlight-color: ladder(
    -fx-background,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0.07) 70%,
    rgba(255,255,255,0.7) 90%,
    rgba(255,255,255,0.75) 100%
);

So if a custom background color is specified on any of the button's ancestor nodes, then this shadow would visually look odd.