How can I nest one block within another so that the borders appear as equal?

Question

css

Good morning.

Problem essence:


The sizes of borders at "button" are displaced at scaling (ctrl+ ctrl-). But this is not the saddest thing. It's sad that the top and bottom borders don't look the same at 100% scale.

The button is made elementary:

<button class="button-custom">
⠀⠀<span>ВОЙТИ</span>
</button>

.button-custom {
⠀⠀box-sizing: border-box;
⠀⠀width: 99px;
⠀⠀height: 44px;
⠀⠀border-radius: 22px;
⠀⠀padding: 2px;
⠀⠀//  тут свойства шрифта, цвета фона, цвета текста и т.д.

⠀⠀& span {
⠀⠀⠀⠀display: table-cell;
⠀⠀⠀⠀text-align: center;
⠀⠀⠀⠀vertical-align: middle;
⠀⠀⠀⠀width: 95px;
⠀⠀⠀⠀height: 40px;
⠀⠀⠀⠀border-radius: 20px;
⠀⠀}
}

The bottom line is that the use of different approaches did not bring anything. So the problem is how browsers programmatically implement the display of the element. This issue is reproducible in Opera, Firefox and Google Chrome (and IE). But I'm not sure if the problem is reproducible on other computers.

Here's a link to the codepen:
Codepen

The border-image method doesn't work with border-radius.

Another thing I tried: the ::before pseudo-element, which worked exactly like this span method (but also liked to fall through other non-display: absolute blocks due to the z-index).

The background-clip method doesn't work 100% either.
Gives out such beauty:

Is it possible to upload a picture? Wouldn't it have the same effect?

Edit: I solved the problem, but it is not entirely clear what caused the problems.