Skip to content

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




  Guest  January 3rd, 2023
   Link

123456&#039;/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE(&#039;c&#039;,5)=&#039;c
  Guest  January 3rd, 2023
   Link

123456&#039;/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE(&#039;g&#039;,0)=&#039;g
  Guest  January 3rd, 2023
   Link

123456/**/and/**/3=DBMS_PIPE.RECEIVE_MESSAGE(&#039;n&#039;,5)
  Guest  January 3rd, 2023
   Link

123456/**/and/**/0=DBMS_PIPE.RECEIVE_MESSAGE(&#039;z&#039;,0)
  Guest  January 3rd, 2023
   Link

123456&#039;and(select+1)&amp;gt;0waitfor/**/delay&#039;0:0:5
  Guest  January 3rd, 2023
   Link

123456&#039;and(select+1)&amp;gt;0waitfor/**/delay&#039;0:0:0
  Guest  January 3rd, 2023
   Link

123456/**/and(select+1)&amp;gt;0waitfor/**/delay&#039;0:0:5&#039;/**/
  Guest  January 3rd, 2023
   Link

123456/**/and(select+1)&amp;gt;0waitfor/**/delay&#039;0:0:0&#039;/**/
  Guest  January 3rd, 2023
   Link

(select*from(select+sleep(5)union/**/select+1)a)
  Guest  January 3rd, 2023
   Link

(select*from(select+sleep(0)union/**/select+1)a)
  Guest  January 3rd, 2023
   Link

123456&#039;&quot;\(
  Guest  January 3rd, 2023
   Link

123456鎈&#039;&quot;\(
  Guest  January 3rd, 2023
   Link

123456&#039;and/**/convert(int,sys.fn_sqlvarbasetostr(HashBytes(&#039;MD5&#039;,&#039;1391660021&#039;)))&amp;gt;&#039;0
  Guest  January 3rd, 2023
   Link

123456&quot;and&quot;p&quot;=&quot;q
  Guest  January 3rd, 2023
   Link

convert(int,sys.fn_sqlvarbasetostr(HashBytes(&#039;MD5&#039;,&#039;1851328117&#039;)))
  Guest  January 3rd, 2023
   Link

123456&quot;and&quot;x&quot;=&quot;x
  Guest  January 3rd, 2023
   Link

123456/**/and/**/cast(md5(&#039;1002899140&#039;)as/**/int)&amp;gt;0
  Guest  January 3rd, 2023
   Link

123456&#039;and&#039;b&#039;=&#039;v
  Guest  January 3rd, 2023
   Link

123456&#039;and(select&#039;1&#039;from/**/cast(md5(1143761605)as/**/int))&amp;gt;&#039;0
  Guest  January 3rd, 2023
   Link

123456&#039;and&#039;t&#039;=&#039;t
  Guest  January 3rd, 2023
   Link

extractvalue(1,concat(char(126),md5(1678548152)))
  Guest  January 3rd, 2023
   Link

123456&quot;and/**/extractvalue(1,concat(char(126),md5(1011160758)))and&quot;
  Guest  January 3rd, 2023
   Link

123456&#039;and/**/extractvalue(1,concat(char(126),md5(1587958451)))and&#039;
  Guest  January 3rd, 2023
   Link

#set($c=851584063+931255393)${c}$c
  Guest  January 3rd, 2023
   Link

&#039;-var_dump(md5(252935522))-&#039;
  Guest  January 3rd, 2023
   Link

${@var_dump(md5(562194975))};


[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



Comments are closed.