posts/unround-firefox-nova: init

2026-10-01 10:57:28 +02:00
parent dd5da12b96
commit be2be66264
3 changed files with 39 additions and 0 deletions
@@ -0,0 +1,39 @@
+---
+title: "Unround tabs in Firefox Nova"
+date: 2026-10-01T10:20:48+02:00
+---
+
+I've just done a major system update and — **BANG!** — there is the new Firefox Nova. It's not that far from the original and I got pretty used to the shades of my button changes every now and then. Not that I'd need this constant repainting in my life but whatever, such is the world now probably. But there is one thing that annoyed me so much – the extreme rounded corners of the tabs
+
+{{< figure src="./nova.png" alt="Screenshot of Firefox Nova tabs with very round corners. They look like a pill." caption="This is what I was faced with" >}}
+
+I don't want to blame people on design too much as I can't even sketch a car without it being ugly, but this is pretty _impractical_ in my opinion. There is so much space wasted. It is probably just fine on full-sized tabs, but when you open a lot of them and they automatically shrink, too much of the screen space gets empty while only too little of the tab title is actually displayed. And the smooth fade-out makes it even worse.
+
+Fortunately, there is an easy way out through the `userChrome.css`. Find your profile directory, create the `chrome` directory and the `userChrome.css` file inside it. Fill it with
+
+```css
+.tabbrowser-tab .tab-background {
+	border-radius: 0px !important;
+}
+
+.tabbrowser-tab {
+	--tab-label-mask-size: 0px !important;
+}
+
+.tab-label-container {
+	mask-image: none !important;
+}
+
+/* container-tab color stripe */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+	--tab-context-line-inline-offset: 0px !important;
+	--tab-context-line-block-offset: 0px !important;
+	border-radius: 0 !important;
+	margin-inline: 0 !important;
+}
+```
+enable the `toolkit.legacyUserProfileCustomizations.stylesheets` setting in `about:config` and restart your Firefox. The end result looks like this
+
+{{< figure src="./userChrome.png" alt="Screenshot of Firefox Nova with rectangular tabs after a custom config is applied." caption="Rectangular again" >}}
+
+While not perfect, I'm happy with it. I guess Nova is the new Firefox in the long run anyway, so the less I deviate from it, the less surprised I'd be later. That's why I decided not to simply turn `browser.nova.enabled` off. It's quite daunting to set this up per each user profile I have, but hopefully I won't have to touch it again anytime soon.