JavaFx: rounded tab

Question

To round my tab corners, I use the following code:

.tab { -fx-border-radius: 10 10 0 0; -fx-background-radius: 10 10 0 0; } .tab:selected .focus-indicator { -fx-border-radius: 10 10 0 0, 10 10 0 0; } 

However, I get a rather strange behavior. When a new tab is created, it has some additional angles that disappear later when I change focus or create a new tab. For example, I create the first tab.

Now I am creating a second tab. The first tab is already normal, but the second has these strange corners.

I checked on centos and win7 - the behavior is the same. How to fix it?

EDIT 1
This is all my css file. The ultimate goal is to increase the title bar of the rounded corners.

 .tab:selected .focus-indicator { -fx-border-radius: 10 10 0 0, 10 10 0 0; -fx-border-insets: -7 -7 -9 -8, -5 -5 -9 -6; } .tab-pane > .tab-header-area > .headers-region > .tab:selected{ -fx-border-insets: 10 10 10 10, 10 10 10 10; } .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label { -fx-alignment: CENTER; -fx-text-fill: -fx-text-base-color; -fx-padding:0 10 0 0; } .tab-header-area .tab{ -fx-padding:4 10 5 10; -fx-border-radius: 10 10 0 0; -fx-background-radius: 10 10 0 0; } 

EDIT 2
I tested it on two different PCs: 1 (Ubuntu), 2 (Centoc 71 and VM Win7). I tried to compile using oracle jdk - the result will be the same.

Answer 1

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

UPDATE The error has moved to the openjdk startup system:

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

Some of your code was redundant. So that 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; } 

It will look like this:

UPDATE

But if you really want to have more radius for rounded corners, this is all you need 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. When you add a newly created tab, strange behavior occurs. So I made a gif to show how the manipulator works.

UPDATE

Answer 2

So, suppose this is a mistake, and you css is fine, the only solution I see now is to remove and add default styles after some delay. Something like that:

  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(); 

A dirty hack, to be honest, but it works for me:

Answer 3

CornerRadii , it just increases and decreases