Most web browsers apply a distinctive visual style to the element that’s currently in focus. This usually manifests as a prominent outline around the element, which is usually applied using the outline CSS property behind the scenes.

If the default outline style for focused elements clashes with your design you might be tempted to remove them using something like this:

:focus {
    outline: none;
}

Do not do this! Those default outline styles are there for a very important reason: accessibility. They help people who don’t (or can’t) use mice and people with visual impairments navigate your site. Removing the default outline styles without replacing them with something else will make your site harder to use for a lot of people.

Want to find out more? Good news! There’s an entire site dedicated to this issue, and it includes suggestions for alternative focus styles to use instead of the defaults: OutlineNone.com.