Creating a browser agnostic or IE alternate internal button border for focus? (accessibility related)

Couple extra requirements I'm working under:

• Needs to be reactive/mobile friendly

• Needs to also be compatible with chrome, firefox, and ideally opera.

  <button class="outline">
  Lol A button
  </button>
  
  button{
    background-color: blue;
    color: white;
    padding: 15px;
  }
  .outline:focus{
    outline: 2px solid white;
    outline-offset: -6px;
  }
  
  

JS Fiddle example of what I'm doing now