CSS outline is a property that puts a line around the outside of an element, often used to indicate focus on the element, especially for users navigating with a keyboard instead of a mouse. For example, when a button is selected (but not yet activated), the browser might put a dotted line around the button to indicate that it’s ready to be activated by a key press.

Removing the outline from an element can make your website or application less accessible to users who rely on keyboard navigation. When the outline is removed, these users might not be able to see which element is selected.

However, there might be situations where the default browser outline is not visually appealing or fits poorly with your site’s design. In such cases, it’s okay to change the outline, but it’s important to replace it with another style that also indicates focus.

Here’s an example:

button:focus {
  outline: none;
  box-shadow: 0 0 10px #719ECE;
}

This CSS removes the default outline on a focused button, and replaces it with a blue glow. This still provides a focus indication for keyboard users, but it fits better with a specific design.

In short, it’s okay to hide the outline with CSS if you provide an alternative way to indicate focus. Just removing the outline without providing an alternative could harm your site’s accessibility.

Style the Outline

Don’t forget, you can also style the outline. I often forget that it has an offset property. 😉

button:focus {
  background-color: black;
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
  outline-offset: 2px;
  color: white;
}