How to Edit CSS Dotted Outline

By . in Web Design. Updated on .

By default, when an anchor tag element is in active or focus state, a dotted line appears around it, as shown in the image below.

This outline is used as a visual aid for users who are accessing the website only with the keyboard, technically with the Tab key. It shows the users what they are currently focusing in. However, in particular cases, this outline turns ugly, annoying, and obtrusive making some designers prefer to move this outline out of sight with the following CSS rules.

with dotted lines
a:hover, a:active, a:focus {
	outline: 0;
}

Keep the outline

It is suggested that we should not remove the outline. Instead, we can try styling the outline presentation to make it fit and work well with our site design. By removing this outline, we will prevent accessibility for users without a mouse or for screen readers.

Styling the outline

This outline is specified with outline property in CSS. We can specify the outline styles, width, and colors. Given the example from the previous figure, we can style the outline, as follows.

a:active, 
a:focus {
	outline: 2px solid #e9841d;
}

This will result in:

styled outline

Now doesn’t that look better then the default outline style?

Replacing the Outline

Alternatively, we may remove the outline and replace it with the other CSS properties. For example, we can replace the outline with the backgrond-color, like so.

a:active, 
a:focus {
	outline: 0;
	backgrond-color: #e9841d;
}

Now, when the menu is in focus state, the background menu is highlighted with a distinctive background color, instead of with an outline.

replace background

Other CSS properties that we may use for replacement are color, border, and text-decoration.

Final Thought

There are many people with disabilities and with limited access to the Web. So, making our website more accessible will indeed be very helpful for them, including providing interactive presentation for elements in focus state, instead of removing the outline.

For more about this subject matter, you can head over to the following references.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail