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.