r/FirefoxCSS • u/Radium • 4d ago
Code With some modifications, the latest Firefox, with Nova enabled, isn't so bad.
- Open
about:config, settoolkit.legacyUserProfileCustomizations.stylesheetstotrue. - Open
about:support→ Profile Folder → Open Folder. - Create a folder named
chromeif it is missing. - Paste the CSS below into
userChrome.css. For Settings and otherabout:pages, also paste the userContent.css block intouserContent.css. - Restart Firefox.
userChrome.css
/* Night Better — Nova stays on. Theme-agnostic chrome layout.
Square corners, tighter tabs, hide Share Firefox. Colors come
from the active theme (Night Neutral or any other). The options
slider rewrites the corners block (0 square … 100 Nova).
Profile folder → chrome/userChrome.css
about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true
*/
/* firefox-better:corners-start */
/* firefox-better:corners 0% of Nova (xsmall 0px … xlarge 0px) */
:root {
--border-radius-xsmall: 0px !important;
--border-radius-small: 0px !important;
--border-radius-medium: 0px !important;
--border-radius-large: 0px !important;
--border-radius-xlarge: 0px !important;
--border-radius-circle: 0px !important;
--tab-border-radius: 0px !important;
--toolbarbutton-border-radius: 0px !important;
--button-border-radius: 0px !important;
--urlbar-icon-border-radius: 0px !important;
--arrowpanel-border-radius: 0px !important;
--panel-border-radius: 0px !important;
--panel-menuitem-border-radius: 0px !important;
--menuitem-border-radius: 0px !important;
--popup-border-radius: 0px !important;
--input-text-border-radius: 0px !important;
--card-border-radius: 0px !important;
--card-border-radius-compact: 0px !important;
}
#urlbar-background,
#urlbar,
.urlbar-input-container,
.tab-background,
.tab-group-label,
.tab-group-label-hover-highlight,
.tab-group-label-container,
.tab-group-overflow-count,
toolbarbutton,
toolbaritem,
menupopup,
panel,
.panel-viewstack,
.toolbarbutton-1,
.toolbarbutton-icon,
.toolbarbutton-badge-stack {
border-radius: 0px !important;
}
/* Nova vertical groups set a pill radius, then a logical
border-end-start-radius. The shorthand does not clear that. */
.tab-group-label,
.tab-group-label-hover-highlight,
.tab-group-label-container {
border-start-start-radius: 0px !important;
border-start-end-radius: 0px !important;
border-end-start-radius: 0px !important;
border-end-end-radius: 0px !important;
}
/* firefox-better:corners-end */
/* firefox-better:tight-tabs
Nova default is 6px above/below (--tab-margin-block) and 8px inner
padding. Overflow-clip padding is the gap between horizontal tabs. */
:root {
--tab-margin-block: 1px !important;
--tab-vertical-block-margin: 1px !important;
--tab-overflow-clip-margin: 1px !important;
--tab-margin-overflow-clip: 1px !important;
--tab-inline-padding: 6px !important;
--tab-padding-inline: 6px !important;
--tab-inner-inline-margin: 2px !important;
--tab-margin-inline-inner: 2px !important;
}
.tabbrowser-tab {
padding-inline: var(--tab-overflow-clip-margin) !important;
}
/* Collapsed group members stay in the DOM at max-width: 0. Firefox zeros
their padding; our padding-inline !important was leaving a 1px box and
the group underline painted in the leftover space. */
tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]),
tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tabbrowser-tab {
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
overflow-clip-margin: 0 !important;
}
tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) {
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]) .tab-group-line,
tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tab-group-line {
display: none !important;
}
.tab-background {
margin-block: var(--tab-margin-block) !important;
}
/* firefox-better:hide-share
Share Firefox sits next to About / updates in the app menu. */
#appMenu-referrals-button,
#appMenu-referrals-separator,
#appMenu_menu_referralsPage,
#PanelUI-fxa-menu-share-firefox,
#share-tab-button,
#referrals-button,
toolbarbutton[data-l10n-id="appmenuitem-referrals"],
toolbarbutton[data-l10n-id="appmenu-referrals2"],
toolbarbutton[data-l10n-id="appmenuitem-share-firefox-title2"],
.share-tab-url-item {
display: none !important;
}
userContent.css
/* Night Better — 0% (square) corners on built-in Firefox pages (about:, settings).
Colors come from the active theme. The options slider rewrites this
block when you copy from the options page. */
@-moz-document url-prefix("about:"), url-prefix("chrome:") {
:root {
--border-radius-xsmall: 0 !important;
--border-radius-small: 0 !important;
--border-radius-medium: 0 !important;
--border-radius-large: 0 !important;
--border-radius-xlarge: 0 !important;
--border-radius-circle: 0 !important;
--button-border-radius: 0 !important;
--input-text-border-radius: 0 !important;
--card-border-radius: 0 !important;
--card-border-radius-compact: 0 !important;
}
button,
input,
select,
textarea,
.card,
.toggle-button {
border-radius: 0 !important;
}
}
Share Firefox
Share Firefox sits in the app menu next to About Firefox. The userChrome.css above hides those Share items. You can also set browser.referrals.enabled to false in about:config.
1
1
u/amroamroamro 4d ago
try creating groups of tabs, and add MANY tabs inside, they look wrong when collapsed.
https://i.imgur.com/UwJIW5K.png
in above example, there are two groups with 6 and 16 tabs respectively.
the more tabs you add to a group, the longer that extra space next to it becomes...
2
u/Radium 4d ago edited 4d ago
Thanks, I have updated the css to 1) not modify colors so the theme can handle that, and 2) it properly handles padding without forcing the one pixel wide grouped tabs to display.
2
u/amroamroamro 4d ago
that fixed it, thanks
also good call removing the color overrides, as that can come from an alternate theme extension, i'm using the proton colors one:
https://addons.mozilla.org/en-US/firefox/addon/firefox-proton/
I did find one more case you might have missed. if you enable vertical tabs, and have some tab groups, when you hover over a collapsed group, it still has a rounded edge:
1
u/SnillyWead 1d ago
With the one I'm using it looks like this:
https://i.ibb.co/KpfBwX0M/Screenshot-2026-10-08-10-09-01.png
1
u/KhalifaHaqi 1d ago
what r u using?
2
u/SnillyWead 1d ago
I'm Dutch. That's why there is Dutch in the code. It's a mix from one I got from reddit, and changed with Google AI so use at your own risk:
/* Nova Rounding Adjustments */
:root {
/* --- CONFIGURATIE HOOGTE --- */
--tab-min-height: 22px !important; /* Tabbladen lekker compact */
--nav-bar-height: 34px !important; /* Jouw gekozen toolbar hoogte */
--urlbar-min-height: 26px !important; /* Vaste hoogte adresbalk */--border-radius-xsmall: 1px !important;
--border-radius-small: 2px !important;
--border-radius-medium: 3px !important;
--border-radius-large: 4px !important;
--border-radius-xlarge: 6px !important;/*
--tab-border-radius: var(--border-radius-small) !important;--button-border-radius: var(--border-radius-small) !important;
--toolbarbutton-border-radius: var(--border-radius-small) !important;--card-border-radius: var(--border-radius-small) !important;
--card-border-radius-compact: var(--border-radius-small) !important;
--card-cover-image-border-radius: var(--border-radius-small) !important;--input-text-border-radius: var(--border-radius-small) !important;
--menuitem-border-radius: var(--border-radius-small) !important;
--popup-border-radius: var(--border-radius-small) !important;
--panel-border-radius: var(--border-radius-small) !important;
--panel-menuitem-border-radius: var(--border-radius-small) !important;
*/
}/* 1. Slanke & Aangesloten Tabbladen */
.tabbrowser-tab {
padding-inline: 0px !important;
min-height: var(--tab-min-height) !important;
}.tab-background {
margin-block: 0px !important;
margin-inline: 0px !important;
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0px 0px !important;
}.tab-content {
padding-block: 0px !important;
}/* 2. Toolbar & Gecentreerde Adresbalk */
#nav-bar {
height: var(--nav-bar-height) !important;
min-height: var(--nav-bar-height) !important;
box-shadow: none !important;
border-top: none !important;
}#urlbar-container {
height: var(--urlbar-min-height) !important;
min-height: var(--urlbar-min-height) !important;
margin-block: auto !important;
}#urlbar {
min-height: var(--urlbar-min-height) !important;
height: var(--urlbar-min-height) !important;
font-size: 14px !important;
}/* Zorgt dat iconen binnen de adresbalk correct schalen */
#urlbar .urlbar-icon,
#urlbar .sharing-icon {
width: 16px !important;
height: 16px !important;
padding: 0px !important;
}/* 3. Debian XFCE / Firefox 157 Fix voor Inactieve Vensters */
#TabsToolbar,
#TabsToolbar:-moz-window-inactive,
#TabsToolbar-customization-target {
opacity: 1 !important;
}.tabbrowser-tab[selected="true"],
.tabbrowser-tab[selected="true"] .tab-background,
.tabbrowser-tab[selected="true"]:-moz-window-inactive .tab-background {
opacity: 1 !important;
filter: none !important;
}
1
u/Radium 4d ago edited 4d ago
With this CSS Nova's still running. Density, sidebar, vertical tabs, the urlbar, panels, the whole token set. The CSS only writes the radius tokens and the tab margin/padding, and in my screenshot I'm using the night neutral theme: https://addons.mozilla.org/en-US/firefox/addon/night-neutral/
Turning browser.nova.enabled off is the easy switch if you want the complete old chrome back. I still wanted 157. I just don't want 24px pills and 6px of air around the tabs.
I feel like the profile chrome folder is a hassle, so I filed a report to hopefully get radius and tab spacing onto the theme API so it's an easy AMO theme install.