The Visual Clutter
For accessibility purposes, Google Chrome renders a “focus ring”—a thick, usually blue or black outline—around interactive elements on a webpage (such as buttons, text fields, or links) when you navigate using the “Tab” key on your keyboard. While essential for keyboard navigation, this feature can sometimes trigger incorrectly. On poorly coded websites, or when using specific browser extensions, Chrome might automatically highlight elements with a thick border even when you are simply clicking them with your mouse. This unexpected visual highlighting ruins the aesthetics of clean web designs and is highly distracting during casual browsing.
Disabling the Focus Indicator
To ensure that buttons and text fields only display their intended CSS styling and stop Chrome from forcing a thick accessibility border around them when clicked, you can disable the focus ring feature via Chrome’s experimental flags.
Open a new tab in your Google Chrome browser. Click inside the address bar, type exactly chrome://flags, and press Enter to load the advanced configuration page. In the search box at the top, type Focus Ring or Accessibility Focus. You are looking for a specific flag titled Enable accessibility focus ring (or similar, depending on your Chrome version). Click the dropdown menu located to the right of this flag. It will likely be set to “Default.” Change the setting to Disabled. A blue “Relaunch” button will appear at the bottom of the screen. Click it to restart your browser. The browser will no longer draw a thick outline around elements when they receive focus.