When rounded corners are used then sharp corners are visible

[PavelTurk]

Cards, tabs and other components with rounded corners are rendered with slightly visible sharp corners:

[infinite-dev22]

That seems to be a Linux only problem

[ponchoboob]

I have the same problem on Windows. It's kind of a styling problem and I "solved" by following work arround.
Within your styles you have to set the control's color as well in the :focused class.

Here is a minimal example to demonstrate it. Let me know, if this fixes your problem.

kind regards,

styles.css

/*
-fx-background-color must also be set in focused in AtlantaFX; otherwise, there are slight "color errors" at the edges. This means that at the four corners or rounded edges, a different color is applied in the style. If no style is overridden here, the problem persists as well.*/
.button {
    -fx-background-radius: 15px;
    -fx-border-radius: 15px;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-background-insets: 0;
}

.button:focused {
    -fx-background-radius: 15px;
    -fx-border-radius: 15px;

/* if you comment out background color, you'll get the described error with your rounded corners */
    -fx-background-color: #eaeef2;
    -fx-border-width: 0px;
    -fx-background-insets: 0;
}

.button:hover {
    -fx-background-color: lightblue;
    -fx-background-insets: 0;
}

.button:pressed, .button.selected {
    -fx-background-color: lightblue;
    -fx-font-weight: bold;
}

App.java

        Application.setUserAgentStylesheet(new PrimerLight().getUserAgentStylesheet());

        AnchorPane anchorPane = new AnchorPane();
        anchorPane.setMinWidth(400);
        anchorPane.setMinHeight(300);

        Button btn = new Button();
        btn.setText("Settings");
        btn.getStylesheets().add(HelloApplication.class.getResource("styles.css").toExternalForm());
        btn.setMinWidth(60.0);
        btn.setMinHeight(32.0);
        AnchorPane.setRightAnchor(btn, 10.0);
        AnchorPane.setLeftAnchor(btn, 10.0);
        AnchorPane.setTopAnchor(btn, 10.0);
        AnchorPane.setBottomAnchor(btn, 10.0);

        anchorPane.getChildren().add(btn);
        Scene scene = new Scene(anchorPane);

        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();

[Taitranz]

You have to adjust the background radius and background and border insects if that makes sense

Without Adjustment

With Adjustment

What the CSS should look like