How to remove Firefox's dotted outline on BUTTONS as well as links?

Question

I can make Firefox not display the ugly dotted focus outlines on links with this:

a:focus { 
    outline: none         


        

Answer 1

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