Remove border outline that appears after I click an element on my page

Question

Every time I click an item in my page a black line appears showing the items boundaries.

Is there a way to not have this line shown at all?

Edit after Solution What I called a border trail is actually an outline used for easier accessibility (for example when using Tab to move around) and should actually be kept, or an alternative used in its place. For more read MarkPlewis's comment below and the link on his answer, as well as Dirk-Jan comment on hos own answer.

Answer 1

I guess you are talking about the focus outline.

To remove it from all elements on your page use this following snippet:

*:focus {
    outline: 0;
}

Or you can ofcourse only set it on the elments you don't want to have this outline.

Answer 2

This is an accessibility feature. It allows users to interact with your website using a keyboard interface. The outline allows you to see which element currently has focus. You can suppress it with the following CSS, but it's not recommended.

*:focus {
    outline: none;
}

You can read more about it here.

If you're working on a government website, then you may be required to follow strict web content accessibility guidelines. WCAG 2.0 level AA explicitly states: "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."

Answer 3

I believe you can solve this with CSS:

*:focus {
    outline: 0;
}

This removes it from all focused elements. * is a selector for all elements. :focus is a pseudo selector for when an element is focused. And the outline you are seeing is the outline CSS property.