How To Add A Border Radius To An Iframe

Looking for a way to add a border radius to your iframe? Need the iframe to be dynamic? Need to still be able to click in it? Here’s How!

This javascript function will set an html element to add a border and force the iframe inside to hide its edges

You can choose the pure javascript function, or the jquery function

pure javascript

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

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

You can add any css styles you want to this element

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

Usage

Now to use this new element, you will only need html

The iframe is a normal youtube embed

<iframe-border width="560" height="315">
<iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>

The Final Result

Comments


[b] Bold [/b] [i] Italic [/i] [u] Underlined [/u] [s] Strikethrough [/s] [c="red"] Color [/c]
[url="https://www.swiftninjapro.com"] Url Link [/url]

Comments Must Contain At Least 3 Words