Pseudo element :before border-radius of parent div

Question

I have a div that when you hover him the color changes by changing the width of the :before element. The problem is that the div have curved border and the :before element does not.

How do I cause the :before element not to paint over the border of the div?

.btn {
  position: relative;
  z-index: 0;
  background-color: grey;
  border: 2px solid black;
  width: 280px;
  height: 100px;
  border-radius: 40px;
  text-align: center;
}

.btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0);
  transition: 1s;
}

.btn:hover:before {
  transform: scaleY(1);
  background-color: blue;
}

<div class="btn">
  Hover me and look to the sides
</div>

Answer 1

Add overflow: hidden; to the button.