CSS outline is not sharp rectangular

Question

I don't want my outline to have rounded corners, but it becomes rounded while it is getting wider during the animation.

Edit: I'm getting the following appearance in MS Edge, and looking at your reaction I tried it on Mozilla Firefox, it seems working perfectly that is however I want. But for those who may use MS Edge, is there a solution to apply?

Codepen

.btn {
  width: 20%;
  height: 15%;
  font-size: larger;
  border: none;
  background-color: darkgrey;
  transition: outline-offset 1s;
}

.btn.border-pop:hover {
  outline: solid darkgrey;
  outline-offset: 10px;
}

Answer 1

Add border-radius: 0; to your button. That is actually the standard design for a border, but you probably set it somewere else.

Answer 2

The button-outline in your Codepen doesn't show any rounded corners for me, on modern Firefox; and none of the CSS you've used in there should cause such a thing.

Do you have the problem in the Codepen? Are you sure it's not added by another (part of your) stylesheet? I'd recommend using your browsers inspect tool to see which CSS statements are applied to it, and from where. (search for outline-radius if there is a lot to go through).