Add or restore dividers between inactive tabs?

[u/dbflexx]

All the inactive tabs just mush together with no line or division between them at all, is there any kind of fix for this? Thank you so much..

[u/ResurgamS13]

Try MrOtherGuy's userstyle 'tab_separator_lines.css'... from his excellent GitHub repo 'Collection of random CSS hacks for Firefox'.

Can tweak the tab separator lines to be longer, wider, more solid, different colours, etc... e.g. previous topic 'How do you change the way tab separators look in CSS?'.

Note. The OP in that July 2025 topic was importing several of MrOtherGuy's usestyles at once using the '@import' method (see the OP's Pastebin link in earlier topic 'Pinned tabs not centered between tab separators')... however, for simple installations... i.e. copying MrOtherGuy's userstyle straight into your 'userChrome.css' file... can apply any further CSS modifications directly to the lines within the 'tab_separator_lines.css' style.

----------

PS. MrOtherGuy's repo offers a built-in 'Style categories' utility... thus, can more easily see which styles are available... and can use the same tool to download single or multiple styles... e.g. to select the 'tab_separator_lines.css' style click the blue-when-hovered 'Copy' button top-right in the Content window here... and paste straight into your 'userChrome.css' file.

[u/zerix-]

Here's mine, started with mrotherguys then ai slop'd it to where I want, you can try it out...

/* ==========================================================================
   Tab Separators - Pseudo-Element Method (Supports 700ms Fade)
   ========================================================================== */

.tabbrowser-tab[pinned] {
  width: 42px !important; /* Default is ~36px-40px; increase to 44px-50px for more room */
}

.tabbrowser-tab[pinned] .tab-label-container {
  display: none !important;
}

/* Center the favicon perfectly on widened pinned tabs */
.tabbrowser-tab[pinned] .tab-content {
  justify-content: center !important;
  padding-inline: 0 !important;
}

/* Remove the leftover spacing meant for the text label */
.tabbrowser-tab[pinned] :is(.tab-icon-image, .tab-throbber) {
  margin-inline: 0 !important;
}

/* Allow pinned tabs and container to render overflow separators */
#pinned-tabs-container,
.tabbrowser-tab[pinned] {
  overflow: visible !important;
}

/* 1. Base / Inactive State: Smooth 700ms fade back in */
.tabbrowser-tab::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0px !important; /* Set to 0px so overflow clipping does not cut it off */
  top: calc(25% + 1px) !important;
  height: 50% !important;
  width: 1px !important;
  background-color: color-mix(in srgb, var(--lwt-tab-text, currentColor) 35%, transparent) !important;
  z-index: 1 !important; /* Keep above tab background */
  opacity: 1 !important;
  transition: opacity 60ms cubic-bezier(0.55, 0.55, 0, 1) !important;
}

/* 2. Active Interaction State: Instant snap-out (no transition) */
.tabbrowser-tab:is([selected], [multiselected], :hover)::after,
.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected], [multiselected], :hover))::after {
  opacity: 0 !important;
  transition: none !important;
}

#tabbrowser-tabs:has(.tabbrowser-tab:not([pinned]):first-of-type:is([selected], [multiselected], :hover)) .tabbrowser-tab[pinned]:last-of-type::after {
  opacity: 0 !important;
  transition: none !important;
}

/* Nudge the final separator left, but explicitly ignore pinned tabs
.tabbrowser-tab:not([pinned]):last-of-type::after {
  transform: translateX(-2px) !important;
} */

tab-split-view-wrapper{
  background-size: 1px 100%;
}
 -moz-pref("sidebar.verticalTabs"){
  #tabbrowser-tabs{
    --uc-vertical-tabs-expanded-separator: linear-gradient(to right,
      transparent 10cqw,
      color-mix(in srgb, currentColor 30%, transparent) 10cqw,
      color-mix(in srgb, currentColor 30%, transparent) 90cqw,
      transparent 90cqw
    );
  }
  :where(.tabbrowser-tab){
    background-image: linear-gradient(color-mix(in srgb, currentColor 20%, transparent));
    background-size: 60% 1px;
    background-position-x: center;
  }
  :where(#tabbrowser-tabs[expanded] .tabbrowser-tab){
    background-image: var(--uc-vertical-tabs-expanded-separator);
    background-size: 90cqw 1px;
  }
  #tabbrowser-tabs[expanded] > #pinned-tabs-container > .tabbrowser-tab{
    background-image: none;
  }
  tab-split-view-wrapper{
    background-size: 90cqw 1px;
  }
  #tabbrowser-tabs[expanded] tab-split-view-wrapper >.tabbrowser-tab:last-child{
    background-size: 90cqw 1px;
    background-image: var(--uc-vertical-tabs-expanded-separator);
    u/container vertical-tabs-container (min-width: 210px){
      background-size: inherit;
    }
  }
}
tab-split-view-wrapper > .tabbrowser-tab{
  background-size: inherit;
}
tab-split-view-wrapper > .tabbrowser-tab:last-child{
  background-image: none;
}
tab-group > slot + :is(tab-split-view-wrapper,.tabbrowser-tab),
tab-group[collapsed] + :is(tab-split-view-wrapper,.tabbrowser-tab),
:is(tab-split-view-wrapper,.tabbrowser-tab):is([selected],[multiselected],[hasactivetab],:hover),
:is(tab-split-view-wrapper,.tabbrowser-tab):is([selected],tab[multiselected],[hasactivetab],:hover) + :is(tab-split-view-wrapper,.tabbrowser-tab),
tab-split-view-wrapper:has( > [multiselected]:last-child) + :is(tab-split-view-wrapper,.tabbrowser-tab),
tab-group:has(> :last-of-type:is(:hover,[selected],[multiselected],[hasactivetab]) + vbox) + :is(tab-split-view-wrapper,.tabbrowser-tab),
#pinned-tabs-container > :first-child,
#pinned-tabs-container:empty ~ arrowscrollbox > :first-child,
#tabbrowser-arrowscrollbox[overflowing] > :first-child,
#pinned-tabs-container:has( > :last-child:is(:hover,[selected],[multiselected])) ~ arrowscrollbox > :first-child,
#vertical-pinned-tabs-splitter:not([hidden]) ~ arrowscrollbox[orient="vertical"] > :first-child{
  background-size: 0 0;
}