Elements with border radius and overflow hidden don't clip the content properly: 1px issue

Question

I'm playing with buttons and came across this issue. When the button has rounded corners and there is an before pseudo element inside of it to simulate background (used for transition), I am getting a 1px issue. The before pseudo element isn't clipped properly and you can barely see some sort of space between the border of the button and the fill color. Check out the examples:

You will see that on rounded buttons, there is a tiny line/space between the border and the fill of the element.

Any clues on how to eliminate it while keeping the structure the same?

EDIT 1. I know I could use background instead, but I can't do it in this case. Background has to be done via pseudo element.

EDIT 2. Issue can be seen on Win 10, Chrome and Firefox. Firefox makes it more visible. Newest versions: Chrome 60.0.3112.78, Firefox 54.0.1

EDIT 3. Edited the code to show why I can't use background property.

a {
  color: black
}

.anibtn {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
}

.anibtn-round {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  border-radius: 50px;
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  width:100%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
}
.tr-fill2-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  width:0;
}

<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>

Answer 1

EDIT :

I could not find the problem, but I found another way to do it ;)

instead of setting a border, make it a border-shadow

.anibtn-round {
  /* border: solid 2px black; */
  box-shadow: inset 0px 0px 0px 2px black;
}

Now that line will go away ;)