Why are my context menu borders rendering 2 pixels wide when set to 1 pixel in JavaFX/CSS?

Question

I'm attempting to style the borders of my context menus in JavaFX with CSS.

The Problem

I want a 1 pixel, solid black line as the border of the context menu. Instead, I'm getting a 2 pixel, solid black line as the border of the context menu.

Here are two images showing the pixel border.

100%

1000%

Clearly, there are 2 pixels being rendered instead of 1 pixel for the border.

CSS

I'm setting the border with the following CSS:

.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: red;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-effect: null;
    -fx-border-width: 1; /* I also tried 1px here */
    -fx-border-color: black;
    -fx-border-style: solid outside line-cap square;
    -fx-padding: 0;
}

I also set the child nodes to transparent borders and backgrounds just to rule out that they were responsible:

.context-menu .menu-item,
.context-menu .menu-item .label {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

Question(s)

1. Why am I getting a 2 pixel border, instead of a 1 pixel border?
2. How can I get a 1 pixel border, instead of this 2 pixel border?

Answer 1

There are a couple of answers already on StackOverflow that explain why the strokes can't seem to render a 1px border all of the time:

1. JavaFX graphics “blurred” or anti-aliased? (No effects used)
2. What are a line's exact dimensions in JavaFX 2?

The best workaround I've found for this issue is to not use borders at all. Instead, I use multiple backgrounds and -fx-background-insets to simulate a border:

.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: black, red;
    -fx-background-insets: 0, 1;
}

That's all it takes for a clean, 1 pixel, hard border