[Firefox Tip] Restore Classic Dotted Outline Focus Indicator for Links

In newer versions of Mozilla Firefox browser (version 100 and later), a new type of focus indicator is used to highlight links which displays a solid blue outline around links. If you don’t like this new feature and want to restore classic link indicator with dotted outline, this article will help you.

In previous versions of Firefox web browser, if a user used keyboard to navigate between links or other page elements such as form fields (textbox, drop-down list box, buttons, checkbox), etc, a dotted outline was shown around the link or element to highlight it. This feature is called focus ring and it was set to 1px dotted line in older versions of Firefox browser.

In new versions of Firefox (100 and later), the dotted outline has been replaced with a new visual indicator which shows a solid blue color outline around links and other elements upon highlight.

Following image shows both old dotted outline and new solid blue outline focus indicator so that you can compare both of them:

Mozilla implemented the new solid blue outline indicator to improve accessibility so that users can easily identify focused links and elements on webpages especially users with low vision.

Although it’s a good decision but some Firefox users may not like the new focus ring or indicator. Fortunately there is a way to disable the new focus indicator and enable old classic dotted outline for links in Firefox 100 and later versions.

I found a hidden preference/flag in Firefox about:config page which can be modified to get rid of the solid blue outline rectangle. Once we change the preference, it restores classic dotted outline ring for links and all other page elements.

If you also want to restore classic focus ring with dotted outline in Firefox, following steps will help you:

1. Open Firefox and type about:config in the address bar and press Enter. It’ll show you a warning message, click on “Accept the Risk and Continue” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now type focus_ring in Search filter box and look for following preference in the window:

This preference is set to false by default.

3. To disable new solid blue outline focus indicator and restore classic dotted outline ring in Firefox, double-click on the above mentioned preference and change its value to true.

It’ll immediately restore classic dotted outline indicator in your Firefox web browser.

PS: In future, if you decide to enable new solid blue outline focus indicator again, set the above mentioned preference value to false.

BONUS TIP: Customize Dotted Outline Ring Appearance in Firefox

There are some other preferences also available on about:config page which can be used to customize the dotted outline ring appearance.

When you search for focus_ring in about:config page, you see following 2 other preferences in the search result:

• browser.display.focus_ring_style
• browser.display.focus_ring_width

Both of these preferences can be used to change old dotted outline ring’s look-n-feel. They’ll not work for the new solid blue outline focus indicator. So you can use them if you have enabled the above mentioned browser.display.focus_ring_on_anything preference to true.

You can modify these preferences to change dotted outline with solid outline as well as customize width of the dotted outline ring as shown in following image:

browser.display.focus_ring_style preference can be used to customize the dotted outline ring appearance. By default it’s set to 1. Double-click and change its value to 0 and it’ll change the dotted outline ring to a solid outline ring. It accepts only 0 and 1 values. 0 for solid outline and 1 for dotted outline.

browser.display.focus_ring_width preference can be used to change the dotted outline width. By default it’s set to 1 which tells Firefox to display 1px dotted outline around links and other fields to highlight them. You can double-click on it and change its value to 2 or more to change the outline width according to your requirements. It’ll work for both 0 and 1 values of browser.display.focus_ring_style preference i.e. dotted as well as solid outline.

Also Check:

[Tip] Restore Full Classic Scrollbars in Mozilla Firefox on Windows 11

[Tip] Restore Classic Download Confirmation Prompt in Mozilla Firefox

[Tip] Restore Classic Theme and UI in Firefox 91 and Later Versions