Recently I've been working on trying to customize Firefox tabs using css. I built Firefox from source so I could access all the files. I don't like the way the tabs float and how squarey they are, so I've decided to make them look more like Vivaldi/Chrome's tabs: Round and attached to the tab bar.
Attaches are 2 images, the first being the round, grounded tabs I want, and the tabs that Firefox has, the ones I don't want: The Vivaldi Tab, The Firefox Tab
I found the file that stores the css for the tabs, mozilla-unified/browser/themes/shared/tabs.css, and this chunk of it seems to be controlling the roundness of the tab and it's margin from the tab bar:
--inline-tab-padding: 8px;
--tab-border-radius: 0px;
--tab-shadow-max-size: 6px;
--tab-block-margin: 4px;
By setting block-margin to 0 I managed to remove the margin between the tab and tab bar. And with the border radius I managed to make the top two corners round, at 12, while the other 2 were 0, as so:
--inline-tab-padding: 8px;
--tab-border-radius: 12px 12px 0px 0px;
--tab-shadow-max-size: 6px;
--tab-block-margin: 0px;
And it ended up looking like this: The Customized Firefox Tab. However, it's not quite looking like the Vivaldi tab yet, as if you look at the Vivaldi tab, it rounds out at the bottom, which is something I'm now trying to get the firefox tab to do. I've tried setting negative values for the border radius, but that isn't working. So, my question: is there a way to set a negative value for the border radius? If yes, then how would I do it? And if no, is there a way to make the bottom corners round out into the tab bar without using border radiuses? All answers and comments are appreciated.
