How to Remove The Dotted Line Around The Clicked a Element in HTML

Remove dotted line around clicked button

that's the focus. Among other things it is important for accessibility (it shows what element is currently selected/has been clicked), so actually you shouldn't remove it.

If you still want to remove it, add this to your stylesheet:

:focus {
  outline: none !important;
}

how to remove the dotted line around the clicked a element in html

Use outline:none to anchor tag class

How to remove the Dotted Border on clicking?

Possible with pure HTML as well:

<a href="..." hidefocus="hidefocus">...</a>

And with JavaScript you can do that on all links:

window.onload = function WindowLoad(evt) {
   //hide focus:
   var arrLinks = document.getElementsByTagName("a");
   for (var i = 0; i < arrLinks.length; i++) {
       arrLinks[i].hideFocus = "true";
}

How do I remove the dotted line on my image button when I click it in firefox?

Try this:

button::-moz-focus-inner {
    border:0;
}

button can be replaced with whatever selector for which you want to disable the behavior.

P.S: It also works without a selector by just using ::-moz-focus-inner.

JSFiddle Demo

Dotted border around link?

That's the focus state. Try to add this:

a:focus {
  outline: none;
}

Or if that element isn't a real link, but for example just an li, make that

li:focus {
  outline: none;
}

How to remove the dotted white border around focused button text

These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).

In Firefox, you can use the ::-moz-focus-inner pseudo element:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}