Round and round

Rounded corners have their place. I don’t hate them per se. But….
A rounded corner shape for a button is just right. It works. It implies it is a button, triggers a function ~ it says “click me” through its roundedness. My issue with the rounded corners is that they seem to have penetrated every other element on a webpage. Designs now feature them not as a choice but as a reflex. They are slapped onto everything ~ with or without context or meaning. They’ve lost their purpose and are degraded to a visual style without much consideration.

A tab shaped like a pill stops being seen or recognised as a tab. An address bar no longer looks like a neat input for URLs if it has the same rounded shape. This is not styling with an agenda, with a considered decision to enhance the interface to make it user-friendly… it’s just visual noise… and worst of all, to my eyes, it makes them look quite childish somehow.

And I would go further still: I do think that AI tools are to blame to some degree here too. My students have handed in work with everything rounded ~ but without being able to explain their rationale. This was often a result of using an AI tool for coding in the first place. But the AI decided to redesign some aspects ~ students sometimes did not notice, or worse still, ended up keeping this change in place as they assumed it must be a good design update as it looked modern, or trendy. And this is what really annoys me: our students are learning – they should not be confronted with something that changes their work without the process of making deliberate design decisions… grrrr….

And then there’s Firefox ~ oh what has become of this once wonderful browser!?
For years, I recommded it as one of the good guys, one that was for people, one that was doing good by user needs. Now ~ I am finding it increasingly difficult to defend… It has become glitchier. It holds onto cache as if its existence depended on it. Its font rendering has gone strange and odd. And now this latest update… horrid roundedness EVERYWHERE… Really???
It is not the design choice itself that annoys me so much. It is the fact that there’s no way to opt out, to keep the existing interface design that we are familiar with. And yes, as web workers, many of us know how to fix this ourselves ~ it’s a nuisance but we can override this. But the fact that we can “code our way out of it” is not really a defence, it’s a workaround. And anyone who is not comfortable or able to edit a stylesheet just gets left to suffer it… That’s not a browser that puts people first, is it?

For anyone who wants their browser back

1. Enable custom stylesheets

In Firefox, go to about:config, accept the warning, search for toolkit.legacyUserProfileCustomizations.stylesheets, and set it to true.
(Repeat this separately in Firefox Developer Edition ~ different profile with its own about:config.)

2. Find your profile folder

Go to about:support and find: Profile Folder ~ and click Show in Finder (mac) / Open Folder (pc).
(Do this in both Firefox and Firefox Developer Edition to get both profile locations.)

3. Create a chrome folder

Inside each profile folder, create a new folder named exactly chrome (lowercase, no extension).

4. Create userChrome.css

Inside the new chrome folder, add the CSS: userChrome.css
(and optionally userContent.css for in-page Firefox UI like Settings/about: pages).

5. Add override CSS

:root { 
	--border-radius-small: 0px !important; 
	--border-radius-medium: 0px !important; 
}

This should do the trick ~ save file.

6. Restart Firefox

Quit and restart Firefox (PLUS separately Firefox Developer Edition) ~ check if borders are normal again with nicely square corners.

However, for me, this initial snippet only worked for the standard Firefox – not the Developer edition… grrr….
So I ended up adding more specific styles, thanks to the kind sharing spirits on connect.mozilla.org ツ
This is the final version (in full) that worked across both:

:root { 
	--border-radius-small: 0px !important; 
	--border-radius-medium: 0px !important; 
}
* {
	border-radius: 0 !important;
}

@media -moz-pref("browser.nova.enabled") {
	:root {
	--chrome-window-gap: 0 !important;
	--chrome-block-radius: 0 !important;
	--chrome-content-separator-color: transparent !important;
	}
}

And phew… the rounded ugliness is gone!