How to add a border radius to iframe

Hello!

I was wondering if there was a way to add a border radius to my zoho form so it matches the container radius it is embedded into. (the picture below shows the issue).

IFrame content overlapping with CSS border

Here is the code I am using to embed the zoho form not sure if I can just add a line of code into this to solve the problem. Here is a link to where the form is embedded (https://staplelandscapes.com/aeration/) It is more noticeable on mobile than on desktop. Thanks!

<div id="zf_div_gEMdORs3V3scHcfa9C5iMZUaL6mAtksDt3SoMAB_yYU"></div><script type="text/javascript">(function() {

try{

var f = document.createElement("iframe");

f.src ="https://forms.staplelandscapes.com/austencarloni/form/NeedaquoteTEST21/formperma/gEMdORs3V3scHcfa9C5iMZUaL6mAtksDt3SoMAB_yYU?zf_rszfm=1&Select_Service=Lawn%20Aeration&Service_Populator=Lawn%20Aeration";

f.style.border="none";

f.style.height="1883px";

f.style.width="99%";

f.style.transition="all 0.5s ease";// No I18N

var d = document.getElementById("zf_div_gEMdORs3V3scHcfa9C5iMZUaL6mAtksDt3SoMAB_yYU");

d.appendChild(f);

window.addEventListener('message', function (){

var zf_ifrm_data = event.data.split("|");

var zf_perma = zf_ifrm_data[0];

var zf_ifrm_ht_nw = ( parseInt(zf_ifrm_data[1], 10) + 15 ) + "px";

var iframe = document.getElementById("zf_div_gEMdORs3V3scHcfa9C5iMZUaL6mAtksDt3SoMAB_yYU").getElementsByTagName("iframe")[0];

if ( (iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0 ) {

var prevIframeHeight = iframe.style.height;

if ( prevIframeHeight != zf_ifrm_ht_nw ) {

iframe.style.height = zf_ifrm_ht_nw;

}

}, false);

}catch(e){}

})();</script>

</center>