How to remove the dotted outline when you click on button or anchor tag

It is quite common fact that due to paddings, we tend to blow the control to larger sizes. Say a menu item, which is a simple anchor tag, inside an ordered list; you will blow the anchor to such a level that on click of it, there appears an outline with dotted line, which looks awkward.

The fix for this:

a { outline:none; }

Bear in mind that this styling literally uses the “outline” CSS property. Outline is very similar to the “border” property, with two important differences:

• Outline goes around the entire object (much like using just “border”), but you may not be specific about sides. “Outline-left” does not exist.
• Outline value is not a part of the box model. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don’t get bumped around when the outline is applied and removed.