how to remove border from iframe in HTML?

How can I remove the border from iframe using HTML or CSS?

Suppose this is my iframe

<iframe src="url"  width="500"   height="300">text here</iframe>

as I would like to show this iframe in my web-page, which has different website URL, without the border it would look better and should match my website background color, so it can look like my websites webpage only


Asked by:- Vinnu
: 3699 At:- 9/14/2017 2:00:41 PM
html css iframe-border

2 Answers
profileImage Answered by:- jaiprakash

You can easily do it using frameborder attribute of iframe, like code below

<iframe src="url" width="200" height="200" frameborder="0">
     <p>Your browser does not support iframes.</p>

to make it work in all browsers including IE6 you can use frameBorder attribute ('B' is capital)

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >

Note: use frameBorder (capital B) for IE, otherwise will not work. But, the iframe frameborder attribute is not supported in HTML5. So, Use CSS instead.

<iframe src="/url" style="width: 100%; height: 400px; border: 0"></iframe>

you can also remove scrolling using scrolling attribute

<iframe src="" width="200" height="200" scrolling="no" style="border:0">

Also, you can use seamless attribute which is new in HTML5.

The seamless attribute of the iframe tag is only supported in Opera, Chrome, and Safari.

At:- 9/15/2017 3:39:27 PM
Thanks, good answer 0
By : Vinnu - at :- 9/21/2017 8:30:32 AM

profileImage Answered by:- vikas_jk

For more better output to remove iframe borders use "frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0""

So example

<iframe src="/url" width="100%" marginwidth="0" height="400" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0">Error, iFrame not supported </iframe>

Using Javascript

If you have lots of iFrame in web-page and want to remove borders using Javascript, call this function on page load.

//remove border from all iFrame of page
function removeAllIFrameBorders(){
   if (window.document.getElementsByTagName("iframe"))
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
            iFrameElements[i].frameBorder="0";   //  For most browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  backup of above.
            iFrameElements[i]"none";   //  For IE.
At:- 1/1/2021 12:13:22 PM
frameborder="0" html attribute for iFrame is good, or we can use CSS to remove border using border:none property. 0
By : bhanu - at :- 5/26/2021 1:55:46 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use