Change JavaFx Tab default Look

Question

I am trying to change the default look of JavaFx tabs using css.

I managed to achieve following.

What I am looking for is there should not be left gap on first tab.

Can somebody please point me in right direction on how to achieve it.

Below is the output I am trying to achieve.

I have used following CSS

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
    -fx-background-color: #e6e6e6;

}

.tab-pane .tab:selected
{
    -fx-background-color: #3c3c3c;
}

.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #828282;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #96b946;
}

Answer 1

You should also override the CSS:

.tab-pane:top *.tab-header-area {     -fx-background-insets: 0, 0 0 1 0;  /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */     -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */ } 

Here the left padding value of the tab-header-area changed from 10 to 0. In addition you need to override other CSS selectors: .tab-pane:bottom, .tab-pane:left and .tab-pane:right in the same manner for different javafx.geometry.Sides of the TabPane.