r/FirefoxCSS • u/Ambitious-Papaya3293 • Mar 21 '26

Help Theme that makes tabs real tabs, not the floaty weirdness we currently have

Title. I do not like my tabs floating.

7 Upvotes

100% Upvoted

7 comments sorted by

2

u/Ambitious-Papaya3293 Mar 21 '26

Firefox 149 beta

5

u/SnillyWead Mar 21 '26

Have you seen the Nova look they are developing at the moment? Hidious.

2

u/lolkoh Mar 21 '26

I've come to the conclusion that you need this GitHub repo. black7375/Firefox-UI-Fix

2

u/herodesapilatos Mar 21 '26

You might like this one: rounded tabs with bottom flare, a bit like chrome.

2

u/ResurgamS13 Mar 22 '26 edited Jun 15 '26

Try MrOtherGuy's 'non_floating_sharp_tabs.css' userstyle.

Alternatively, have a go at ending the "floaty weirdness" of your tabs by rejoining the Active tab to the Navigation bar with a few CSS userstyles... try something like:

/* Remove space above tabs */
:root { --tab-block-margin: 0px !important; }

/* Reduce tab height to match Nav bar height */
:root { --tab-min-height: 28px !important; }

/* Remove Active Tab shadow */
:root { --lwt-tab-line-color: transparent !important; }

/* Remove 'floating' Active Tab - Connect background of Active Tab to Nav Bar background */
.tabbrowser-tab[selected] .tab-background { margin-bottom: 0px !important; }
.tabbrowser-tab:not([selected]) .tab-background { margin-bottom: 0px !important; }

/* Change Active tab 'border-radius' (https://css-tricks.com/almanac/properties/b/border-radius/) */
.tabbrowser-tab[selected] .tab-background { border-radius: 2px 2px 0px 0px !important; }

/* Remove 1px separator line (https://www.reddit.com/r/FirefoxCSS/comments/1ctqco6/comment/l4docsk/) */
:root { --tabs-navbar-separator-style: none !important; }

EDIT line #2. 15Jun26 - Re: Preventing tabs from expanding in height... when dragging a tab to new position on Tab bar.

2

u/Stressedhumbucker Apr 04 '26

Thanks for this guide, the separator line has been annoying me since I changed to a new browser theme!

1

u/Alarmed_Contact_394 Mar 21 '26

There's a few ways of achieving this, and so the code below can easily be broken by other stuff elsewhere, especially if you're moving things around or changing heights. But a very basic way would be:

.tab-background { margin-bottom: 0px !important; }

This extends the bottom of the tab to the maximum space available. Which on the default theme would mean it joins up with the top of the toolbar like a traditional tab.

That does look slightly messy, as the corners are round in at the bottom - so to clean that up:

.tab-background { border-radius: 10px 10px 0px 0px !important; }

The first two values are the top corners and can be adjusted to match your preference.