<p>I can make Firefox not display the ugly dotted focus outlines on <b>links</b> with this:</p>

<pre class="lang-css prettyprint-override"><code>a:focus { 
    outline: none; 
}
</code></pre>

<p>But how can I do this for <code>&lt;button&gt;</code> tags as well? When I do this:</p>

<pre class="lang-css prettyprint-override"><code>button:focus { 
    outline: none; 
}
</code></pre>

<p>the buttons still have the dotted focus outline when I click on them.</p>

<p>(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)</p>

There's no way to remove these dotted focus in Firefox using CSS.
If you have access to the computers where your webapplication works, go to about:config in Firefox and set
```
browser.display.focus_ring_width
```
to 0. Then Firefox won't show any dotted borders at all.
The following bug explains the topic:
https://bugzilla.mozilla.org/show_bug.cgi?id=74225