How to align borders with the <a> element?

Question

I tried this one but it box-sizingdoesn't work.

Flexbox works, but then the text is not vertically centered. Therefore, I added align-items: centerto the container div, but then the situation is the same as in the beginning.

Pseudo-elements also do not work.

I would like to get a clean CSS solution, but please avoid floating point solutions.

a {
  color: black;
  text-decoration: none;
  display: inline-block;
}
a:first-child {
  padding: 1em;
  border: 0.2em solid #111;
}
a:last-child {
  padding: 1em;
  color: white;
  background-color: black;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

Run code

CODEPEN

Answer 1

Here's a quick and easy fix:

You have a black border rule applied to one field:

a:first-child {  
    padding: 1em;   
    border: 0.2em solid #111;
}

Instead, apply the rule to both fields:

a {
  color:black;
  text-decoration: none;
  display: inline-block;
  border: 0.2em solid #111;
}
a:first-child {  
  padding:1em;   
}
a:last-child {
  padding: 1em;
  color: white;  
  background-color: black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

Run code

Answer 2

use shadow insert

a{
  color:black;
  text-decoration:none;
  display:inline-block;
}
a:first-child{  
  padding:1em;   
  box-shadow: inset 0 0 0 0.2em black;
}
a:last-child{
  padding:1em;
  color:white;  
  background-color:black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

Run code

Answer 3

a {
  display: inline-block;
  text-decoration: none;
  padding:1em;
  border: 3px solid;
}
a:first-child {  
  color: #000;
}
a:last-child {
  color:white;
  background-color:black;
  border-color: transparent;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>