Introduction

The blue border you see around a button in Chrome is usually the browser’s default focus outline. You can remove it, but the better solution is to replace it with a custom focus style so keyboard users still have a visible focus indicator.

Understand What the Blue Border Really Is

The border is not normally a regular border property from your stylesheet. It is a focus outline applied by the browser when the element receives keyboard or interaction focus.

button:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

That default behavior exists for accessibility. It helps users understand which control currently has focus.

Remove the Default Outline Only If You Replace It

If you truly want to remove Chrome’s default blue ring, the direct CSS is simple.

button:focus {
  outline: none;
}

But that should usually be treated as incomplete, not finished. A button without any visible focus state is harder to use with a keyboard.

Use a Custom Focus Style Instead

A better pattern is to suppress the default outline and add your own visible focus treatment.

1button:focus {
2  outline: none;
3  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.7);
4}

This keeps the UI consistent with the design while preserving a clear focus cue.

You can also style the border itself if the button already has a border-based design.

1.button-custom:focus {
2  outline: none;
3  border-color: #1d7af3;
4}

The important part is that focus remains obvious.

Prefer :focus-visible for Better Behavior

Modern browsers support :focus-visible, which lets you show a focus style mainly when it is actually useful, especially for keyboard navigation.

1button:focus {
2  outline: none;
3}
4
5button:focus-visible {
6  outline: 2px solid #1d7af3;
7  outline-offset: 2px;
8}

This avoids showing a focus ring for every mouse click while still supporting keyboard accessibility.

Match the Style to the Component Design

A custom button often already has hover, active, and disabled states. Focus should be designed alongside those states instead of as an afterthought.

For example, a pill-shaped primary button might use a glow, while a flat text button might use an underline or contrast change. The exact style matters less than making it visible and consistent.

Good custom focus styling is part of component design, not a CSS cleanup hack.

Test with Keyboard Navigation

After styling focus, test with the Tab key rather than only by clicking. That is the real proof that the button still has a usable focus state.

If you cannot tell which control is focused while tabbing, the design is not done yet.

That replacement can be a shadow, outline, border change, or background change, but it should always remain visible under real contrast conditions.

Common Pitfalls

• Removing the focus outline and forgetting to provide any replacement at all.
• Confusing the browser focus outline with the element’s normal border styling.
• Styling :focus only for mouse behavior and never testing keyboard navigation.
• Using a replacement focus color that does not have enough contrast against the button background.
• Ignoring :focus-visible and forcing the same focus behavior for every interaction mode.

Summary

• The blue Chrome border is usually the default focus outline.
• 'outline: none removes it, but should rarely be the final solution.'
• Replace the default ring with a visible custom focus style.
• ':focus-visible is often the best modern selector for accessible focus treatment.'
• Always test focus styling with keyboard navigation, not just with mouse clicks.