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 **on**. However, in particular cases, this outline **can appear** ugly, annoying, and obtrusive making some designers prefer to move this outline out of sight with the following CSS rules.

Default CSS dotted outline example
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 **reduce accessibility** for users without a mouse or for **those using 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:

Example styled CSS outline

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

Replacing the Outline

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

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

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

CSS outline replaced with background

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

View Demo Download Source

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 **an** 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