Rounded corners for video module and image module

I am trying to match the rounded corners I have on my text modules with my video and image modules. This is the code I am using for my text modules:

.page-id-55 .avia_textblock {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 2px solid ;
background: rgba(255, 255, 255, 0);
-webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

Here is the webpage, http://arrowrealtynetwork.com/kansas-city-real-estate-investing/
There is 1 video module and 1 image module on this page that I need to make rounded.

I used this code:

.page-id-55 .avia-image-container {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 2px solid ;
background: rgba(255, 255, 255, 0);
-webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

For the image, but as you can see, it appears the image is overlaying on top of the rounded corners. I want the image to appear like it has rounded edges so it fits in the box. Same thing for the video.

Please help.