Unwanted outline or border around button when clicked

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>