{"id":17886,"date":"2013-08-12T18:01:36","date_gmt":"2013-08-12T10:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17886"},"modified":"2025-04-24T17:17:40","modified_gmt":"2025-04-24T09:17:40","slug":"css-dotted-outline","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-dotted-outline\/","title":{"rendered":"How to Edit CSS Dotted Outline"},"content":{"rendered":"

By default, when an anchor tag element is in active<\/code> or focus<\/code> state, a dotted line appears around it, as shown in the image below.<\/p>\n

This outline is used as a visual aid for users who are accessing the website only with the keyboard, technically with the Tab<\/span> 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<\/strong> with the following CSS rules.<\/p>\n

\"Default<\/figure>\n
\na:hover,\na:active,\na:focus {\n    outline: 0;\n}<\/pre>\n
Keep the outline<\/h2>\n
It is suggested<\/a> 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**.<\/p>\n
Styling the outline<\/h2>\n
This outline is specified with outline<\/code> 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.<\/p>\n
\na:active,\na:focus {\n    outline: 2px solid #e9841d;\n}<\/pre>\n
This will result in:<\/p>\n
\"Example<\/figure>\n
Now doesn\u2019t that look better **than** the default outline style?<\/p>\n
Replacing the Outline<\/h2>\n
Alternatively, we may remove the outline and replace it with other CSS properties. For example, we can replace the outline with the background-color<\/code>, like so.<\/p>\n
\na:active,\na:focus {\n    outline: 0;\n    background-color: #e9841d;\n}<\/pre>\n
Now, when the menu is in focus<\/code> state, the **menu\u2019s background** is highlighted with a distinctive background color, instead of with an outline.<\/p>\n
\"CSS<\/figure>\n
Other CSS properties that we may use for replacement are color<\/code>, border<\/code>, and text-decoration<\/code>.<\/p>\n
\n    View Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
Final Thought<\/h2>\n
There are many people with disabilities<\/a> 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<\/code> state, instead of removing the outline.<\/p>\n
For more about this subject matter, you can head over to the following references.<\/p>\n