How to Remove Dotted Outline Around Links Using CSS

While clicking an anchor link, dotted lines may appear. You can remove dotted outline around links with this tutorial. Removing the dotted line from links require CSS to add to your stylesheet.

What are Dotted Outlines Around Anchor Links

Dotted lines are the lines comes after your click any anchor link. This is the by default features 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 for the active link and focus link. You have to use the below small CSS to perform this task.

Make this CSS as !important for all CSS selectors as given in the example below.


The above example contains three anchor links to click and visit a page. Outline appear by default if you click these links one by one using your mouse. The links may generate outlines around the links.

Here, there are no outlines around the links when you click the anchor links given above. This is because you have used the CSSoutline:none Which removes the outlines from active links as well as the focus links.

remove dotted line around clicked anchor element

Hope, you like this tutorial. If you have any other method to remove dotted outline around links, please comment below with your solution.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Get the PDF

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Download Link Will be Send to Your Email id