How to round the edges of a whole section/div

I have an image like this
(https://i.sstatic.net/oz4mb8A4.png)
and it zooms in when you hover.

However I am trying to round the edges of the image and the overlay that covers the image when I hover. How do I do this?

This is my code in html

<section class="effects">
<div class="container">

   <div class="image-01-outer">

    <div class="image-01">
      <img src="PHILIPPA'S NEW VIDEO.png" alt="">

          <div class="overlay1">
              <div class="text-content">
                  <h3 class="h3-img"> Header</h3>
                  <p>Body of text. Body.</p>
              </div>
          </div>
  </div>

   </div>

</div>

</section>

and in css I have this

.effects .image-01 
{
border: 1px solid blue;  
border-radius: 4rem;  
position: relative; 
}

.effects .image-01 img
{
    max-width: 120rem;
}

.effects .image-01 .overlay1
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s ease;
    background-color: rgba(228, 20, 255, 0.327);
}

.effects .image-01:hover .overlay1
{
    opacity: 1;
}

.effects .image-01:hover 
{
    transition: transform .4s;
    transform: scale(1.1);
    transform-origin: 100% 50%;
}