This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Natao arisiva ity resaka mitohy ity. Mametraha fanontaniana azafady raha mila fanampiana.

userChrome.css can't change border of active tab

  • 2 valiny
  • 1 manana an'ity olana ity
  • 1 view
  • Valiny farany nomen'i cor-el

vegarab
vegarab
more options

bold textI'm trying to change the border of the active tab in Firefox.

/* Color border of current tab */ .tab-content[selected="true"]{ 

 background-color: var(--color0) !important;
 --tabs-border-color: var(--color0) !important;

}

  1. navigator-toolbox { 
 --tabs-border-color: var(--color5) !important;

}

All tabs get the color var(--color5), except the active tab, which does not get ANY border. However, I am able to change it's background to var(--color0). When inspecting the tab-element with the developer tools, I can see the two CSS-rules being applied, but there is NO border.

For some reason, it does not appear to be possible to have a border on the active tab?

Thank you for any help.

(Can't figure out how to make a code-block.. It says 1. navigator-toolbox, but there is supposed to be a #, as in referencing the ID)

'''bold text'''I'm trying to change the border of the active tab in Firefox. /* Color border of current tab */ .tab-content[selected="true"]{ background-color: var(--color0) !important; --tabs-border-color: var(--color0) !important; } #navigator-toolbox { --tabs-border-color: var(--color5) !important; } All tabs get the color var(--color5), except the active tab, which does not get ANY border. However, I am able to change it's background to var(--color0). When inspecting the tab-element with the developer tools, I can see the two CSS-rules being applied, but there is NO border. For some reason, it does not appear to be possible to have a border on the active tab? Thank you for any help. (Can't figure out how to make a code-block.. It says 1. navigator-toolbox, but there is supposed to be a #, as in referencing the ID)

Novain'i vegarab t@

All Replies (2)

WestEnd
WestEnd
more options

If that is a custom site userChrome.css that your using you should contact that site for support. I don't know but asking for user to help with css issues can get quite involved. Is there a reason you couldn't find a site that had such a setting that you could use to customize the Browser.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Does it work if you set the border color on .tabbrowser-tab ? 

.tabbrowser-tab[selected="true"]{
 background-color: var(--color0) !important;
 --tabs-border-color: var(--color0) !important;
}