How to get better tabs in Firefox UI (on Mac)

#browsers #firefox #css

Yes, the tabs in Firefox suck, they look like pills (or buttons) and look horrible, right?

This is how I styled them to look a little more visually pleasing:

Edit /Users/<username>/Library/Application Support/Firefox/Profiles/<your profile>/chrome/userChrome.css and add the following:

Note, you should know where this file is. If you don't, Google it and come back here.



.tab-background {
    border-radius: 0 0 3px 3px !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.tabbrowser-tab:not( [selected=true] ):not( [multiselected=true] ) .tab-background {
    background-color: color-mix( in srgb, currentColor 10%, transparent);
}

I am using this theme, curious how this looks in other themes.

Also, please let me know how this works on Windowz!

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started