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);
}