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;}['width'] = '100%';['height'] = '100%'; iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';['position'] = 'relative';['margin'] = '0'; } } setInterval(setIframeBorder, 10);
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);

You can add any css styles you want to this element

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

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="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </iframe-border>

The Final Result


[b] Bold [/b] [i] Italic [/i] [u] Underlined [/u] [s] Strikethrough [/s] [c="red"] Color [/c]
[url=""] Url Link [/url]

Comments Must Contain At Least 3 Words