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

This thread was archived. Please ask a new question if you need help.

Add top border to inacytive tabs

  • 3 replies
  • 1 has this problem
  • 18 views
  • Last reply by PCZero

PCZero
PCZero
more options

What is the entry I need to add to usechrome.css to add a border to the inactive tabs in FireFox? With the default configuration, the inactive tabs blur into the menu bar. When hovered the inactive tabs changes to a darker grey and has the border added. I'd like to add the bored to all inactive tabs whether hovered or not.

What is the entry I need to add to usechrome.css to add a border to the inactive tabs in FireFox? With the default configuration, the inactive tabs blur into the menu bar. When hovered the inactive tabs changes to a darker grey and has the border added. I'd like to add the bored to all inactive tabs whether hovered or not.
Attached screenshots

Chosen solution

If you aren't looking for something that has the tab shape, just a solid line, you could add a background color on the tabs "behind" the tab line element. This uses a linear gradient (top to bottom) to start gray and switch to transparent after a few pixels: 

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 3px, transparent 1px, transparent 99%);
}


Two notes:

(1) I tested with the Light theme; this color probably won't work well on other themes.

(2) I think it's a little more attractive if the top line is thinner. For example, 2 pixels on the gray band: 

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 2px, transparent 1px, transparent 99%);
}
Read this answer in context 👍 0

All Replies (3)

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

Looks this is done via this CSS code: 

.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
  background-color: rgba(0,0,0,.2);
  opacity: 1;
  transform: none;
}

To apply this code for all tabs you can try: 

.tabbrowser-tab > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
  background-color: rgba(0,0,0,.2) !important;
  opacity: 1 !important;
  transform: none !important;
}
jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

Chosen Solution

If you aren't looking for something that has the tab shape, just a solid line, you could add a background color on the tabs "behind" the tab line element. This uses a linear gradient (top to bottom) to start gray and switch to transparent after a few pixels: 

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 3px, transparent 1px, transparent 99%);
}


Two notes:

(1) I tested with the Light theme; this color probably won't work well on other themes.

(2) I think it's a little more attractive if the top line is thinner. For example, 2 pixels on the gray band: 

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 2px, transparent 1px, transparent 99%);
}
PCZero
PCZero Question owner
more options

Thank you both for your responses. Very helpful. I opted for the following...

.tabbrowser-tab { 

 background-image: linear-gradient(rgba(0,0,0,.2) 1px, transparent 1px, transparent 99%);

}

This gave me exactly what I want/need! Very much appreciate your assistance.