I'm customizing my tab-pane with css.
.tab-pane > .tab-header-area > .headers-region > .tab:top {
-fx-border-color: #a3a7a8;
-fx-border-radius: 5 5 0 0;
-fx-background-color: white;
-fx-pref-height: 40px;
-fx-background-insets: 0;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected:top {
-fx-border-color: #2381E9 #a3a7a8 #a3a7a8 #a3a7a8;
-fx-border-width: 5 1 1 1;
-fx-border-radius: 5 5 0 0;
-fx-background-color: white;
-fx-pref-height: 40px;
-fx-background-insets: 0;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #2381E9;
-fx-font-weight: bold;
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #2381E9;
-fx-font-weight: bold;
}
.tab-pane > .tab-header-area > .tab-header-background {
-fx-background-color:white;
-fx-border-color: #a3a7a8;
-fx-border-width: 0 0 1 0;
-fx-background-insets: 0;
-fx-pref-height: 45px;
}
The result is quite nice (see the image). I'd like to know if is possibile to avoid that the blue border (when the tab is selected) can stop before start the radius of the tab.
Furthermore, which is the correct selector to use to introduce some distance between tabs? I can't figure out how to do this.