How to remove the blue border of the tabpane?

Question

I can’t get the blue border pattern that is shown in the event :focused. I’m trying to solve this problem by CSS, but I can’t.

My CSS code:

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #333333;
}

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

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
    -fx-padding: 10 20;
}

.tab-pane .tab{
    -fx-background-color: #333333;
}

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

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

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

Upshot:

Answer 1

As already said, you can use the Outline: 0;, but it should be noted that by removing it, you reduce the accessibility of your page. Alternative solutions: styling Outline to be more aesthetic, or removing it, but creating a style for when the element is :phocus, which may be the same as :Hover.

These links on Outline and accessibility are worth checking out:

http://ux.sapo.pt/accessibility/web-accessibility/navegacao-4/#toc-no-remover-o-Outline-dos-elementos-clickable

http://www.outlinenone.com/

Answer 2

Try something like: Outline: 0; in his css It will remove the blue edge when the element is in :focused