Remove Dotted Link Borders

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
    outline: none;
}

NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.