How to remove the dotted white border around focused button text

Question

I need to, but cannot, remove the white dotted border around the text of a focused button.

After reading articles about "remove white border (especially Dotted border around link? and links inside), I have try several solutions of disabling outline like "outline: 0; or outline: none;, using or not !important.

But nothing does remove the dotted white border around the text of a focused button. Here is my simplest test page code. I cannot show a screenshot, because it removes the focus from the button.

button {
  font-size: 87.5%;
  font-family: "ubuntu", Sans-serif;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  border: 0;
}

button:focus,
button:active {
  outline: none;
  outline: 0;
  outline: none !important;
  outline: 0 !important;
}

<button type="button">TEST</button>

Using Firefox 67.0.3 on Ubuntu 18.04 (Bionic Beaver), this page still shows a dotted white border around focused button text, which I'd like to remove (I'll show the focus with a method of my own).

Answer 1

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;
}  

Answer 2

You need to add setback for different browsers, for example:

button:focus,
button:active {
    -moz-outline: 0;
    -ms-outline:0;
    -o-outline: 0;
    -webkit-outline: 0;
} 

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.