How to Customize and Change Width or Length of Tabs in Mozilla Firefox?

Now-a-days all web browsers come with tab feature which allows you to open more than one webpage in a single browser window using tabs. Its more convenient and useful for the end user.

Each browser has its own built-in settings for tab width or length. When you open a new tab, its automatically assigned a fixed amount of space in the tab bar which is called maximum width of tab. As soon as you open multiple tabs in the browser, the existing tabs width is automatically reduced to provide space for new tabs, its called minimum width of tab.

Many times you may want to customize the width of tabs for example, you may want to reduce the maximum width of a tab or you may want to increase the minimum width of tab so that the browser doesn't reduce tab width below your defined limit.

Today in this tutorial, we are going to share the method to customize or change minimum and maximum width or length of tabs in Mozilla Firefox web browser. Recently an AskVG reader "Joseph" asked us about it, so this tutorial has been created as per Joseph's request.

In older versions of Mozilla Firefox, the minimum and maximum width of tabs can be customized using about:config preferences. You just needed to modify browser.tabs.tabMaxWidth and browser.tabs.tabMinWidth preferences in about:config window. But this feature was discontinued in Firefox 4.0 and later versions due to a bug.

Now you can customize tab width using CSS code which is stored in userChrome.css file present in your Firefox profile folder.

So if you want to customize or change tab width in Mozilla Firefox, check out following steps:

1. First of all you'll need to create a new file userChrome.css in "chrome" folder inside your Firefox user profile folder. If you are not aware of this file and your profile folder, check out following article:

List of Files that can be Edited to Configure and Customize Mozilla Firefox

2. Once you create the userChrome.css file or if it already exists, open it in Notepad.

3. Now paste following piece of code in the file. If the file already exists and contains some text, paste the code at the end of the file:

.tabbrowser-tab:not([pinned]) {
max-width: 250px !important;
min-width: 100px !important;
}

4. The above code will tell Firefox to set maximum width of tab to 250px and minimum width of tab to 100px which is actually default settings for tabs.

So if you want to customize the width, you can just change the px values in the code. For example, if you want to decrease maximum tab width to 150px and want to reduce minimum tab width to 50px, then you'll need to use following code:

.tabbrowser-tab:not([pinned]) {
max-width: 150px !important;
min-width: 50px !important;
}

You can play around the values to achieve your desired result.

5. After pasting the code, save the file and run Mozilla Firefox and you'll see the desired width of tabs.

Check out following video to see this method live in action:

PS: If you don't want to add the CSS code in userChrome.css file, you can apply the same code using Stylish extension for Firefox. Check out step 4 in following tutorial to know how to apply CSS code using Stylish add-on: