WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Tweak to remove the dotted outline around a link

by Aky Joe

Are you annoyed of the dotted outline around link when it gains focus or get active? Well, most of us use Firefox, and by default Anchor links have dotted outline around them, when they get active or gain focus. Below screenshot which will clear you more:

Remove Dotted outllines around link

Dotted outlline around link

Usually outlines around small size links don’t get in notice, but if a link is “h1” heading then it really affects the readability. Also the websites which are using content sliders, you will notice the navigation arrows have big dotted lines around them and floated from left which looks more ugly and. Just like one in the screenshot below:

Remove Dotted Line on Content Slilder

Dotted Line on Content Slilder

How to remove ?

Many instances we find these outline important as they justify us about the link, but few instances like the content sliders or floated items, it really looks undesired. In this article, I will share a simple tweak to override the browser’s default css, and it will remove dotted outline around all links.

a {
outline: 0;

Copy-Paste the above code snippet in the Style.css file of the website or blog. If we don’t want to remove outline completely, for instance active state of links should have outline enabled and removed for focus and mouseover states. The code for the scenario will look like as give below:

a: hover, a:focus {
outline: 0;

Copy-Paste the above code snippet in the Style.css file of the website or blog. Further save and refresh to see the effect, you will find the outline is not visible while links gaining focus.

We come to the end of this article, though it was a three line code and but important for many of us. If you have any query or any further assistance required post comments as your feedback.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

No Comments

{ read them below or add one }

Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...