How to make the button outline follow the curvature of the elements?

Question

I know that the outline is very important for usability and especially for the accessibility of the page, including here is a very interesting Webaim article about it: https://webaim.org/blog/plague-of-outline-0/

But the outline does not seem to follow the border-radius elements. In the case of this button for example, see that the outline does not accompany curvature of the element, causing an unwanted effect...

How could we treat this kind of case as correctly as possible, I mean, what is the best practice for this kind of problem? Which "palliative" we can use without compromising accessibility and usability?

button {
  width: 100px;
  height: 50px;
  border: 0;
  border-radius: 25px;
}

<button type="submit">Button</button>
	

Answer 1

firefox has the property -moz-outline-radius, but will not work in most browsers

One solution would be to disable the outline and create a :focus

button {
  width: 100px;
  height: 50px;
  border: 0;
  outline: none;
  border-radius: 25px;
}
button#ex1:focus {
  box-shadow: 0 0 0 3px lightblue;
}
button#ex2:focus {
  border: 3px solid lightblue;
}

<button id="ex1">Button</button>
<button id="ex2">Button</button>

Important information on the use of property border to simulate the outline is that there is a change in the size of the elements, for example:

button {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 0;
  outline: none;
  border-radius: 25px;
}
button:focus {
  border: 25px solid lightblue;
}

<button>Button</button>
<button>Button</button>
<button>Button</button>
<br>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<br>
<button>Button</button>
<button>Button</button>
<button>Button</button>

As the questioner himself commented on the chat:

"If you go to the google.com page you will see that he also uses the technique you used in the answer ;)"

"Other than that it seems that border-Radius + box-shadow consumes a lot of rendering feature, especially when animated!"

"However BS4 itself uses box-shadow to treat this 'Outline'"

"... the BS even changes the color to match the btn"