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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

Firefox Quantum - Add divider between tabs

  • 3 fhreagra
  • 1 leis an bhfadhb seo
  • 3 views
  • Freagra is déanaí ó the-edmeister

MichelleFru
MichelleFru
more options

HELP! My line of tabs run together with no separation between them.

I copied a custom CSS to get rounded tabs and tabs on bottom. 

/* Firefox Quantum userChrome.css tweaks */
/* Github: https://github.com/aris-t2/customcssforfx */

:root {
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  --classic_squared_tabs_tab_text_color: black;
  --classic_squared_tabs_tab_text_shadow: transparent;
  --tab-min-height_tnot: 32px;
}

:root[uidensity=compact]  {
  --tab-min-height_tnot: 28px;
}

:root[uidensity=touch] {
  --tab-min-height_tnot: 40px;
}

/* tabs toolbar adjustment */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, 
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#TabsToolbar {
  -moz-padding-start: 2px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, 
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme,
#TabsToolbar:-moz-lwtheme,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[sizemode="maximized"] #TabsToolbar,
#main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, 
#main-window[tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #TabsToolbar {
  -moz-padding-start: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar {
  margin-top: 0px !important;
}

#main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
  padding-top: 0px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* tab title in titlebar support */
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{
  margin-top: 0px !important;
}

/* titlebar button support */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{
  margin-top: 2px !important;
}

/* fix for application/hamburger button in titlebar */
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar  #PanelUI-button {
  visibility: collapse !important;
}

#main-window[inDOMFullscreen="true"] #TabsToolbar {
  opacity: 0 !important;
}

/* tab height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height_tnot) !important;
}

/* toolbar order (start) ************************************/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1 !important;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2 !important;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3 !important;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10 !important;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100 !important;
}
/* toolbar order (end) **************************************/

/* toolbar colors */
#TabsToolbar:not(:-moz-lwtheme){
  -moz-appearance: none !important;
  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
}

/* remove color overlay for lw-themes */
#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']) :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
  background: unset !important;
}

/* adjust compact themes background color */
#main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
  -moz-appearance: none !important;
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}
#main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar:-moz-lwtheme {
  -moz-appearance: none !important;
  background: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}

#main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
#main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton,
#main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down),
#main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton {
  fill: black !important;
  color: black !important;
}

/* toolbar borders */
#main-window #navigator-toolbox::after {
  opacity: 0 !important;
}

#TabsToolbar{
  margin-bottom: 0px !important;
  border-bottom: 1px solid #5f7181 !important;
}

#main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
  border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
  border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important;
  background-clip: padding-box !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme,
#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
  border-bottom: 1px solid #323234 !important;
HELP! My line of tabs run together with no separation between them. I copied a custom CSS to get rounded tabs and tabs on bottom. <pre><nowiki>/* Firefox Quantum userChrome.css tweaks */ /* Github: https://github.com/aris-t2/customcssforfx */ :root { --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa); --tabs_toolbar_border-tnot_normal_mode_size: 1px; --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color); --classic_squared_tabs_tab_text_color: black; --classic_squared_tabs_tab_text_shadow: transparent; --tab-min-height_tnot: 32px; } :root[uidensity=compact] { --tab-min-height_tnot: 28px; } :root[uidensity=touch] { --tab-min-height_tnot: 40px; } /* tabs toolbar adjustment */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #TabsToolbar { -moz-padding-start: 2px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[sizemode="maximized"] #TabsToolbar, #main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #TabsToolbar { -moz-padding-start: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar { margin-top: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar { padding-top: 0px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar, #main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{ margin-top: 0px !important; } /* tab title in titlebar support */ #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{ margin-top: 0px !important; } /* titlebar button support */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{ margin-top: 2px !important; } /* fix for application/hamburger button in titlebar */ #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button { visibility: collapse !important; } #main-window[inDOMFullscreen="true"] #TabsToolbar { opacity: 0 !important; } /* tab height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height_tnot) !important; } /* toolbar order (start) ************************************/ #print-preview-toolbar, #printedit-toolbar, #titlebar { -moz-box-ordinal-group: 0 !important; } #navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* navigation toolbar */ #navigator-toolbox #nav-bar { -moz-box-ordinal-group: 2 !important; } /* bookmarks toolbar */ #navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* 3rd party toolbars */ #navigator-toolbox toolbar { -moz-box-ordinal-group: 10 !important; } /* tabs toolbar */ #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100 !important; } /* toolbar order (end) **************************************/ /* toolbar colors */ #TabsToolbar:not(:-moz-lwtheme){ -moz-appearance: none !important; background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important; } /* remove color overlay for lw-themes */ #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']) :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{ background: unset !important; } /* adjust compact themes background color */ #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { -moz-appearance: none !important; background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; } #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar:-moz-lwtheme { -moz-appearance: none !important; background: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; } #main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton, #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton { fill: black !important; color: black !important; } /* toolbar borders */ #main-window #navigator-toolbox::after { opacity: 0 !important; } #TabsToolbar{ margin-bottom: 0px !important; border-bottom: 1px solid #5f7181 !important; } #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; background-clip: padding-box !important; } #main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: 0px !important; border-right: 0px !important; } #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme, #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { border-bottom: 1px solid #323234 !important; </nowiki></pre>
Attached screenshots

Athraithe ag cor-el ar

All Replies (3)

Shadow110
Shadow110
more options

Hi, will notify someone of your usserChrome issue. Would this help some what though your background theme is really the issue I think : https://addons.mozilla.org/en-US/firefox/addon/colorfultabs/

MichelleFru
MichelleFru Úinéir na ceiste
more options

Unfortunately that doesn't work and I am looking for more of a divider between the tabs. Almost like a border around each tab so they don't all run together.

the-edmeister
the-edmeister
  • Moderator
more options

Try posting over here: https://www.reddit.com/r/FirefoxCSS/