How to separate a border and an effect?

Question

Currently, I have a button with the following CSS:

Button {
    -fx-text-fill: -fx-color-text;
    -fx-font: 15pt "Raleway SemiBold";

    -fx-background-color: -fx-color-theme;
    -fx-background-insets: 0, 0, 0, 0, 0, 1, 2;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    /* -fx-effect: innershadow(two-pass-box, white, 2, 0.2, 0, 0); */
    -fx-border-insets: 0;
    -fx-border-color: black;
}

And it looks like this:

And I'm trying to add an inner shadow to the button. I want the border to show on the outside of this button, which should result in something like this:

I made that in Swing. However, when I try and apply my inner shadow, it draws on top of my border, as shown:

I've tried setting the border insets to -1 (because there isn't an insets property for the effect), but that just moved the effect with it:

My question is: What can I do to ensure that I can see my border around the outside, but keep my effect on the inside?

EDIT: I'm pretty sure that this is a bug in OpenJFX and I've submitted a bug report. Here's some quick code you can use to reproduce the issue:

public class App extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Region example = new Region();
        example.setMaxWidth(100);
        example.setMaxHeight(100);
        example.setEffect(new InnerShadow(BlurType.GAUSSIAN, Color.RED, 10, 0.04, 0, 0));
        example.setStyle("-fx-background-color: white; -fx-border-color: BLUE; -fx-border-width: 5px;");

        StackPane container = new StackPane();
        container.setStyle("-fx-background-color: black;");
        container.setAlignment(Pos.CENTER);
        container.getChildren().add(example);

        Scene scene = new Scene(container, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

EDIT2: This is end up being a bug, and it's been reported here: https://bugs.openjdk.java.net/browse/JDK-8238733

try -fx-effect: innershadow( gaussian , rgba(0,0,0,0.7) , 20,0,0,0 ); — Ahamed Safnaj, Jan 28 '20 at 12:09
@Ahamed Safnaj That adds a very unnoticeable vignette effect around the button, but does not fix the issue — FireController1847, Jan 28 '20 at 22:48
I would suggest jfoenix material library for javafx. It has very attractive buttons. If you wish you can check them out too.. — Ahamed Safnaj, Jan 29 '20 at 05:35

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

I think the border is getting blended with the effect which is applied. And as you are pretty sure that it could be a bug in JavaFX rendering, below is one way to get it look the way you want.

You can consider the below solution as when you think like "I definitely want this look only !!" kind of thing :)

The idea is, instead of setting the effect, you paint the effect manually.

.button {
    -fx-text-fill: #FFFFFF;
    -fx-font: 15pt "Raleway SemiBold";
    -fx-background-color: #000000, #720D4D, #D03A9A, #DD70B6, #B01378, #CC2C93, #D03A9A, #C81688;
    -fx-background-insets: 0, 1, 1 2 2 1, 1 2 2 2, 2, 2 3 3 2, 2 3 3 3, 3;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    -fx-border-insets: 0px;
    -fx-border-radius: 0px;
    -fx-border-width: 0px;
}

And the output is as below [ignore the font as I dont have the .tff ;)]:

And a closer look for verification purpose:

This may not be an actual solution, but can be one alternate (least case).

I was afraid it'd be a bug. I'll let this question play out and if this is the only solution I'll mark this as the solution. Thanks the this alternative, I'll check it out. — FireController1847, Jan 28 '20 at 23:35
Very late reply, but this issue did end up being bug and it's been reported here. Accepting your answer as the solution :) https://bugs.openjdk.java.net/browse/JDK-8238733 — FireController1847, Jun 19 '23 at 22:36

How to separate a border and an effect?

1 Answers1