Last Updated on February 12, 2021 by Roshan Parihar
In this tutorial, learn how to remove dotted outline around links in CSS. The short answer is: use the CSS outline:none property to the link element in both focus and active state.
When you click on the anchor link, dotted lines may start to appear that you will find in the example given below.
What are Dotted Outlines Around Anchor Links
Dotted lines are the lines that come after your click any anchor link. This is the by default feature of the browser to show the link dotted border when someone clicks on the anchor link.
However, you can remove the generated outline using CSS. It’s the active state and the focus state of the link when you see the dotted lines around the anchor link. This is the indication that you have clicked the anchor link or anchor button.
How CSS Remove Dotted Outline Around Links
To remove dotted outline around links, you have to use the CSS outline:none to the :active and :focus state of links. Also, make this CSS as !important for all CSS selectors as given in the example below:
|
1 2 3 4 5 6 7 8 9 10 |
<style> a, a:active, a:focus{ outline:none !important; } </style> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> |
Output
In the above example, there are no outlines around the links when you click the anchor links given above. This is because you have used the CSS outline:none property that removes the outlines from active as well as the focus links.
You May Also Like to Read
- Show/Hide Image on Hover Anchor Link Using jQuery
- How to Add Shadow Effect to Div Element Using CSS
- Change Text Selection Color and Background in CSS
I hope you like this tutorial to remove the dotted outline around links.