Unwanted outline or border around button when clic

Question

I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don't know which). How can I remove that border? Below is all the code that pertains to the button.

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}

<button>this is my button</button>

Answer 1

Use either of these CSS Styles

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; } 

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>

Answer 2

If you are talking about the dotted line in Firefox, I think what you're looking for is this:

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

This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?

Answer 3

It's an outline. Use outline:none; on :focus pseudo-class to remove it. Worked well for me.

Answer 4

outline: none;

This worked for me in Chrome.

Answer 5

Please don't remove the outlines on focus-styles, this makes your site less accessible to your keyboard-only and low-vision users.

If you choose to add something like :focus { outline: none; } to your stylesheets, also add you owns styles for focused elements.

Reading: Never remove CSS outlines