Remove the glowing border from focused tab with CSS

Question

I am trying to remove the blue glowing border, which apears when the pane is focused of a tab in a tabpane in my javaFX application. any idea on how to do this in css?

This is my current css:

 .tab{
    -fx-background-radius: 0;
    -fx-background-color:  derive(-fx-base, 0%);
    -fx-background-insets: 0.3; 
    -fx-focus-color: XXXXXX;
    }
.tab:hover{
    -fx-background-color:  derive(-fx-base, 20%);
}
.tab:selected{
    -fx-background-color:  derive(-fx-base, 60%);
}

but i dont know which value i should give focuse color to match the background derive(-fx-base, 60%) i can see a difference and if i set it to -fx-background-color i get an error

Answer 1

One way to achieve this is to set the border color to transparent.

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-color: transparent;
}

You can also set the focus color and the faint focus color (used for the inset border) directly.

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

I used the specific class here, but it also works with the tab class.

.tab {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}