Remove blue border from css custom-styled button in Chrome
Categories:
Eliminate the Blue Border from Custom-Styled Buttons in Chrome

Learn how to effectively remove the persistent blue outline that appears on custom-styled buttons when clicked or focused in Google Chrome, ensuring a consistent and polished UI.
When developing web applications, maintaining a consistent look and feel across different browsers is crucial. One common UI annoyance developers encounter, especially with custom-styled buttons, is the blue outline that appears in Google Chrome when a button is clicked or receives focus. This outline, often referred to as the 'focus ring' or 'focus outline', is a browser-default accessibility feature designed to help users navigate with keyboards. While important for accessibility, it can sometimes clash with custom designs, leading to an unpolished appearance.
Understanding the Chrome Focus Outline
The blue border you see around buttons in Chrome is the browser's default visual indicator for focused elements. It's automatically applied to interactive elements like buttons, links, and form inputs when they receive focus, either through a click, tab navigation, or JavaScript. This behavior is part of the browser's default stylesheet (user-agent stylesheet) and is intended to improve accessibility for users who rely on keyboard navigation. However, for highly customized designs, this default outline can interfere with the intended visual aesthetic.
flowchart TD A[User Clicks/Tabs to Button] --> B{Button Receives Focus} B --> C{Browser Applies Default Outline} C --> D[Blue Border Appears] D --> E{Developer Wants Custom Look} E --> F[CSS Solutions to Override Outline]
Flowchart of Chrome's default focus outline behavior.
The outline
Property: The Primary Solution
The most direct way to remove or customize this blue border is by using the CSS outline
property. The outline
property is similar to border
, but it's drawn outside the element's border and doesn't take up space. This makes it ideal for focus indicators. By setting outline: none;
on the button's :focus
state, you can effectively remove the default blue border.
button {
/* Your custom button styles */
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:focus {
outline: none; /* Removes the default blue outline */
}
Applying outline: none;
to remove the default focus border.
outline: none;
effectively removes the visual indicator, it's crucial to consider accessibility. Removing the focus outline without providing an alternative visual cue can make your site difficult to navigate for keyboard users. Always provide an alternative focus style.Providing Accessible Alternatives
To maintain accessibility while achieving a custom look, you should replace the default outline with your own distinct focus style. This can be done using box-shadow
, border
, or other visual effects on the :focus
pseudo-class. The goal is to ensure that keyboard users can clearly see which element is currently active.
button:focus {
outline: none; /* Remove default outline */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Custom blue shadow */
/* OR */
/* border: 2px solid #0056b3; */ /* Custom border */
/* OR */
/* transform: scale(1.02); */ /* Subtle animation */
}
Examples of accessible custom focus styles using box-shadow
.
:focus-visible
pseudo-class. This allows you to show a focus indicator only when the element is focused via keyboard navigation, not when clicked with a mouse. This provides a better experience for both mouse and keyboard users./* Requires a polyfill for older browsers or careful progressive enhancement */
button:focus {
outline: none; /* Always remove default */
}
button:focus-visible {
outline: 2px solid #007bff; /* Show outline only for keyboard focus */
outline-offset: 2px;
}
Using :focus-visible
for context-aware focus styling.