JavaFx: tab rounded corners

Question

To make my tab corners rounded I use the following code:

.tab {
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

.tab:selected .focu         


        

Answer 1

So lets suppose that it's a bug, and you css is fine, the only solution i see for now is to remove and add default styles after some delay. Something like this:

 Tab tab = new Tab("Tab " + (tabs.getTabs().size() + 1));
 tabs.getTabs().add(tab);
 new Thread(()-> {
     try {
         Thread.sleep(50);
     } catch (InterruptedException e) {
         e.printStackTrace();
     }
     Platform.runLater(()->{
           tabs.getStyleClass().remove("tab-pane");
           tabs.getStyleClass().add("tab-pane");
     });
 }).start();

Nasty hack to be honest, but it works for me:

Answer 2

It is CornerRadii , it just increases & decreases

Answer 3

This is an already reported bug https://javafx-jira.kenai.com/browse/RT-40462

UPDATE The bug has moved to the openjdk bugtracking system:

https://bugs.openjdk.java.net/browse/JDK-8090243

Some of your code was redundant. So this should work.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
    -fx-border-insets: -6 -9 -8 -8, -5 -8 -7 -7;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
*/
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-background-radius: 10 10 0 0;
}

This will look like that:

UPDATE

But if you really only want to have more radius to the rounded corners, this is all you have to do:

.tab-pane > .tab-header-area > .headers-region > .tab {
    /* if outer border should be 10 radius */
    -fx-background-radius: 10 10 0 0, 9 9 0 0, 8 8 0 0;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 9 9 0 0, 8 8 0 0;
}

UPDATE

This is what I get from your code. There is a strange behaviour when adding a newly created tab. So I made a gif to show how the mouseover is working.

UPDATE