Hello Readers.

Anchor links (<a>'s), when become ‘active’ or ‘focused’, get a dotted outline around them. This is a default styling. Also, the color of the outline is the same as the color of the text.

One thing, if you all might have noticed, is that this dotted outline will only disappear in the case if user clicks anywhere else in the page. There are situations when we would want to remove this outline. Before getting to that, let’s see the difference between an outline and a border.

Clearly, outline property is similar to the border property to a great extent. There are 2 major  differences between the two. First, outline is done all around the entire object . Outline cannot be side-specific. Second, the outline property is not a part of the box model. Border is calculated with the total width of the box (total width=width+border), but this is not the case with outline property.

So, how to remove this default outline? Add this really simple code to your CSS, and you’re done.

CSS:

a, a:active, a:focus {
outline: 0;
}

Keep Coding Fellas!