The Intrusive Outline
As you navigate through a webpage using Google Chrome, you might notice that whenever you click on a hyperlink or a button, a thick black, blue, or orange rectangle instantly surrounds the element. This outline stays there until you click somewhere else on the page. While this automatic highlighting is a crucial accessibility feature designed to help users navigate via the keyboard (showing them exactly which element has “focus”), it can be visually distracting for mouse users and can completely ruin the carefully crafted aesthetics of a website.
How to Remove the Focus Outline via Chrome Flags
In older versions of Chrome, the focus ring was controlled by a deep system flag. However, modern Chrome directly respects the underlying CSS of the website you are visiting. If a website forces a focus outline, Chrome will display it.
If you want to forcefully override this behavior on your end, you must use a Chrome extension designed to inject custom CSS into every page you visit.
1. Open the Google Chrome Web Store.
2. Search for and install an extension called Stylus (a popular, open-source user-style manager).
3. Once installed, click the Stylus icon in your Chrome toolbar and select Manage.
4. Click the Write new style button on the left.
5. Give the style a name, like “Remove Focus Outlines.”
6. In the large code box, paste the following CSS code:
*:focus {
outline: none !important;
}7. Below the code box, ensure the “Applies to” dropdown is set to Everything.
8. Click the Save button on the left.
By forcing this CSS rule globally, you are explicitly instructing Chrome to never draw an outline around a focused element, regardless of what the website’s original code requests.
A Warning Regarding Accessibility
Before implementing this global override, you must understand that the focus outline is not a bug; it is a fundamental requirement for web accessibility. If your mouse breaks and you need to navigate a form using the Tab key, removing the outline makes the web completely unusable, as you will have no visual indicator of where you are on the page. Only use this CSS override if you rely 100% on pointing devices like a mouse or trackpad.