<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Firefox on Nelson Figueroa</title><link>https://nelson.cloud/categories/firefox/</link><description>Recent content in Firefox on Nelson Figueroa</description><image><title>Nelson Figueroa</title><url>https://nelson.cloud/apple-touch-icon.png</url><link>https://nelson.cloud/categories/firefox/</link></image><language>en</language><lastBuildDate>Sat, 31 Oct 2026 00:00:00 -0700</lastBuildDate><atom:link href="https://nelson.cloud/categories/firefox/index.xml" rel="self" type="application/rss+xml"/><item><title>How to Remove Rounded Firefox Tabs</title><link>https://nelson.cloud/how-to-remove-rounded-firefox-tabs/?ref=rss</link><pubDate>Sat, 31 Oct 2026 00:00:00 -0700</pubDate><guid>https://nelson.cloud/how-to-remove-rounded-firefox-tabs/?ref=rss</guid><description>You can remove Firefox&amp;rsquo;s rounded tabs and other rounded elements with a few lines of CSS.</description><content:encoded><![CDATA[<p>Firefox 

<a href="https://www.firefox.com/en-US/firefox/157.0/releasenotes/" target="_blank" rel="noopener">157.0</a> made its tabs round along with a bunch of other UI elements. I thought it was ugly as hell, so I spent time figuring out how to change the tabs back. Here&rsquo;s how to bring back corners in Firefox tabs and other areas.</p>
<h2 id="removing-rounded-tabs">Removing Rounded Tabs</h2>
<p>This has been tested on Firefox v159.</p>
<ol>
<li>Type <code>about:config</code> in your browser and press enter. If you see a &ldquo;Proceed with Caution&rdquo; screen, click on &ldquo;Accept the Risk and Continue&rdquo;.</li>
<li>Type <code>toolkit.legacyUserProfileCustomizations.stylesheets</code> into the search field and press enter.</li>
<li>In the result that comes up, click on the circle icon on the right side. The <code>false</code> value should change to <code>true</code>.</li>
<li>Next, go to <code>about:support</code>, search for &ldquo;Profile Folder&rdquo;. You should see the full path to your Firefox profile, usually ending with <code>.default-release</code>. Open that directory.</li>
<li>In that folder, create a folder named &ldquo;chrome&rdquo;. Then, create a file inside it called &ldquo;userChrome.css&rdquo;.</li>
<li>Copy and paste this CSS into &ldquo;userChrome.css&rdquo;:
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--tab-border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></li>
<li>Save &ldquo;userChrome.css&rdquo; and restart Firefox.</li>
</ol>
<p>The tabs are more squared now. I like my tabs boxy, but you can tweak the <code>4px</code> value and increase it if you want more roundness, or set it to <code>0px</code> if you want fully square corners. Just remember to restart Firefox after editing and saving. Here&rsquo;s a before and after screenshot:</p>
<img src="https://nelson.cloud/firefox-rounded-tabs/firefox-tabs-before-after.webp" alt="Firefox tabs before (rounded pill shape) and after (squared corners)" width="720" height="85" style="max-width: 100%; height: auto; aspect-ratio: 1680 / 198;" loading="lazy" decoding="async">
<h2 id="squaring-off-the-address-bar-and-menus">Squaring off the Address Bar and Menus</h2>
<p>If you also want other elements to be less rounded, add the following to &ldquo;userChrome.css&rdquo;:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--border-radius-small</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--border-radius-medium</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--border-radius-large</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--border-radius-xlarge</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--panel-border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="nv">--panel-menuitem-border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div><p>There is no <code>--tab-border-radius</code> in this CSS snippet because the variables already cover the tabs.</p>
<p>Then restart Firefox. Your address bar, menus, and bookmarks should be more squared, just like your tabs.</p>
<img src="https://nelson.cloud/firefox-rounded-tabs/firefox-ui-before-after.webp" alt="Firefox address bar and dropdown before (rounded) and after (squared corners)" width="720" height="384" style="max-width: 100%; height: auto; aspect-ratio: 2560 / 1366;" loading="lazy" decoding="async">
<h2 id="squaring-off-the-new-tab-and-home-pages">Squaring off the New Tab and Home Pages</h2>
<p>In the same &ldquo;chrome&rdquo; directory that you previously created, create a new file named &ldquo;userContent.css&rdquo; and add this CSS to it:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">-moz-document</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&#34;about:newtab&#34;</span><span class="o">),</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&#34;about:home&#34;</span><span class="o">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nv">--border-radius-small</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="nv">--border-radius-medium</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="nv">--border-radius-large</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="nv">--border-radius-xlarge</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">  <span class="nt">content-search-handoff-ui</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nv">--content-search-handoff-ui-border-radius</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div><p>Save the file and restart Firefox. The elements on the new tab and home pages should be more squared.</p>
<img src="https://nelson.cloud/firefox-rounded-tabs/firefox-newtab-before-after.webp" alt="Firefox New Tab page before (rounded search box and shortcuts) and after (squared corners)" width="720" height="563" style="max-width: 100%; height: auto; aspect-ratio: 1900 / 1486;" loading="lazy" decoding="async">
]]></content:encoded></item></channel></rss>