CSS adding border radius to an IFrame

Question

Adding a border to an IFrame is no biggie - you do it like this e.g.:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;
         


        

Answer 1

Working solution: (2019) this allows you to apply any additional css you want, keep the iframe dynamic, and still interact with the iframe.

add this javascript (or jquery) function to your page:

pure javascript solution:

function setIframeBorder(){
    let iframeBorder = document.getElementsByTagName('iframe-border');
    for(let i = 0; i < iframeBorder.length; i++){
        let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
        let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
        if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
        iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
        iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
        iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
    }
}
setInterval(setIframeBorder, 10);

jquery solution:

function setIframeBorderJquery(){
    $('iframe-border').each(function(){
        $(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
        $('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
    });
}
setInterval(setIframeBorderJquery, 10);

css: (optional)

iframe-border{
    border-radius: 20px;
}

usage: