Remove border from IFrame

Question

How would I remove the border from an iframe embedded in my web app  An example of the iframe is    lt iframe src  myURL  width  300  height  300  gt Browser not compatible  lt  iframe gt    I would like the transition from the content on my page to the contents of the iframe to be seamless  assuming the background colors are consistent  The target browser is IE6 only and unfortunately solutions for others will not help

User · Answer

After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.

You have to set the frameBorder attribute with a capital B.

<iframe frameBorder="0"></iframe>

User · Answer

Style property can be used  For HTML5 if you want to remove the boder of your frame or anything you can use the style property  as given below   Code goes here   lt iframe src  demo htm  style  border none   gt  lt  iframe gt

User · Answer

lt iframe src  URL  frameborder  0  width  100   height  200  gt   lt p gt Your browser does not support iframes  lt  p gt   lt  iframe gt    lt iframe frameborder  1 0  gt    OR    lt iframe src  URL  width  100   height  300  style  border  none  gt Your browser  does not support iframes  lt  iframe gt   The  lt iframe gt  frameborder attribute is not supported in HTML5  Use CSS  instead

User · Answer

Try   lt iframe src  url  style  border none   gt  lt  iframe gt    This will remove the border of your frame

User · Answer

Use this  style  border none    Example    lt iframe src  your html  style  border none   gt  lt  iframe gt

User · Answer

You can use style  border 0   in your iframe code  That is the recommended way to remove border in HTML5    Check out my html5 iframe generator tool to customize your iframe without editing code

User · Answer

I tried all of the above and if that doesn t work for you try the below CSS resolved the issue for me  Which just tells the browsers to not add any padding or margin          padding 0px    margin 0px

User · Answer

You can also do it with JavaScript this way  It will find any iframe elements and remove their borders in IE and other browsers  though you can just set a style of  border   none   in non-IE browsers instead of using JavaScript   AND it will work even if used AFTER the iframe is generated and in place in the document  e g  iframes that are added in plain HTML and not JavaScript    This appears to work because IE creates the border  not on the iframe element as you d expect  but on the CONTENT of the iframe--after the iframe is created in the BOM      amp        IE      Note  The IE part will only work  of course  if the parent window and iframe are from the SAME origin  same domain  port  protocol etc    Otherwise the script will get  access denied  errors in the IE error console  If that happens  your only option is to set it before it is generated  as others have noted  or use the non-standard frameBorder  0  attribute   or just let IE look fugly--my current favorite option       Took me MANY hours of working to the point of despair to figure this out     Enjoy                                                                                      Remove borders on iFrames  if  window document getElementsByTagName  iframe               var iFrameElements   window document getElementsByTagName  iframe          for  var i   0  i  lt  iFrameElements length  i                           iFrameElements i  frameBorder  0         For other browsers              iFrameElements i  setAttribute  frameBorder    0          For other browsers  just a backup for the above               iFrameElements i  contentWindow document body style border  none         For IE

User · Answer

If the doctype of the page you are placing the iframe on is HTML5 then you can use the seamless attribute like so    lt iframe src       seamless  seamless  gt  lt  iframe gt    Mozilla docs on the seamless attribute

User · Answer

lt iframe src  mywebsite  frameborder  0  style  border  0px solid white   gt HTML iFrame is not compatible with your browser lt  iframe gt    This code should work in both HTML 4 and 5

User · Answer

Use the HTML iframe frameborder Attribute  http   www w3schools com tags att iframe frameborder asp  Note  use frameBorder  cap B  for IE  otherwise will not work  But  the iframe frameborder attribute is not supported in HTML5  So  Use CSS instead    lt iframe src  http   example org  width  200  height  200  style  border 0  gt    you can also remove scrolling using scrolling attribute http   www w3schools com tags att iframe scrolling asp   lt iframe src  http   example org  width  200  height  200  scrolling  no  style  border 0  gt    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  When present  it specifies that the iframe should look like it is a part of the containing document  no borders or scrollbars   As of now  The seamless attribute of the  tag is only supported in Opera  Chrome and Safari  But in near future it will be the standard solution and will be compatible with all browsers  http   www w3schools com tags att iframe seamless asp

User · Answer

If the doctype of the page you are placing the iframe on is HTML5 then you can use the seamless attribute like so    lt iframe src       seamless  seamless  gt  lt  iframe gt    Mozilla docs on the seamless attribute

User · Answer

As per iframe documentation  frameBorder is deprecated and using the  border  CSS attribute is preferred    lt iframe src  test html  style  width  100   height  400px  border  0  gt  lt  iframe gt     Note CSS border property does not achieve the desired results in IE6  7 or 8

User · Answer

Try   lt iframe src  url  style  border none   gt  lt  iframe gt    This will remove the border of your frame

User · Answer

lt iframe src  mywebsite  frameborder  0  style  border  0px solid white   gt HTML iFrame is not compatible with your browser lt  iframe gt    This code should work in both HTML 4 and 5

User · Answer

1 Via Inline Style set border 0    lt iframe src  display file html  style  height  400px  width     100  border  0   gt HTML iFrame is not compatible with your browser     lt  iframe gt    2  Via Tag Attribute frameBorder Set 0   lt iframe src  display file html  width  300  height  300  frameborder  0  gt Browser not compatible  lt  iframe gt    3  if We have multiple I Frame We can give class and Put css in internal    or externally   HTML         lt iframe src  display file html  class  no border iframe  gt      HTML iFrame is not compatible with your browser   lt  iframe gt    CSS    lt style gt   no border iframe  border  0     or border none        lt  style gt

User · Answer

For browser specific issues also add frameborder  0  hspace  0  vspace  0  marginheight  0  marginwidth  0  according to Dreamweaver    lt iframe src  test html  name  banner  width  300  marginwidth  0  height  300  marginheight  0  align  top  scrolling  No  frameborder  0  hspace  0  vspace  0  gt Browser not compatible   lt  iframe gt

User · Answer

also set border  0px        lt iframe src  yoururl  width  100   height  100   frameBorder  0  gt  lt  iframe gt

User · Answer

Use this  style  border none    Example    lt iframe src  your html  style  border none   gt  lt  iframe gt

User · Answer

I tried all of the above and if that doesn t work for you try the below CSS resolved the issue for me  Which just tells the browsers to not add any padding or margin          padding 0px    margin 0px

User · Answer

iframe src  XXXXXXXXXXXXXXX  marginwidth  0  marginheight  0  width  xxx  height  xxx    Works with Firefox

User · Answer

Add the frameBorder attribute  Capital    B        lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible   lt  iframe gt

User · Answer

Add the frameBorder attribute  note the capital    B       So it would look like    lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible  lt  iframe gt

User · Answer

also set border  0px        lt iframe src  yoururl  width  100   height  100   frameBorder  0  gt  lt  iframe gt

User · Answer

To remove border you can use CSS border property to none    lt iframe src  myURL  width  300  height  300  style  border  none  gt Browser not compatible  lt  iframe gt

User · Answer

Its simple just add attribute in iframe tag frameborder   0   lt iframe src    width  200  height  200  frameborder  0  gt  lt  iframe gt

User · Answer

Add the frameBorder attribute  note the capital    B       So it would look like    lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible  lt  iframe gt

User · Answer

I had an issue with bottom white border and i could not fix it with border  margin  amp  padding rules     So add display block  because iframe is an inline element   This takes whitespace in your HTML into account

User · Answer

Either add the frameBorder attribute  or use style with border-width 0px   or set border style equal to none   use any one from below 3    x000D   x000D   lt iframe src  myURL  width  300  height  300  style  border-width 0px   gt Browser not compatible  lt  iframe gt  x000D   x000D   lt iframe src  myURL  width  300  height  300  frameborder  0  gt Browser not compatible  lt  iframe gt  x000D   x000D   lt iframe src  myURL  width  300  height  300  style  border none   gt Browser not compatible  lt  iframe gt  x000D   x000D   x000D

User · Answer

You can use style  border 0   in your iframe code  That is the recommended way to remove border in HTML5    Check out my html5 iframe generator tool to customize your iframe without editing code

User · Answer

For browser specific issues also add frameborder  0  hspace  0  vspace  0  marginheight  0  marginwidth  0  according to Dreamweaver    lt iframe src  test html  name  banner  width  300  marginwidth  0  height  300  marginheight  0  align  top  scrolling  No  frameborder  0  hspace  0  vspace  0  gt Browser not compatible   lt  iframe gt

User · Answer

After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.

You have to set the frameBorder attribute with a capital B.

<iframe frameBorder="0"></iframe>

User · Answer

Use the HTML iframe frameborder Attribute  http   www w3schools com tags att iframe frameborder asp  Note  use frameBorder  cap B  for IE  otherwise will not work  But  the iframe frameborder attribute is not supported in HTML5  So  Use CSS instead    lt iframe src  http   example org  width  200  height  200  style  border 0  gt    you can also remove scrolling using scrolling attribute http   www w3schools com tags att iframe scrolling asp   lt iframe src  http   example org  width  200  height  200  scrolling  no  style  border 0  gt    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  When present  it specifies that the iframe should look like it is a part of the containing document  no borders or scrollbars   As of now  The seamless attribute of the  tag is only supported in Opera  Chrome and Safari  But in near future it will be the standard solution and will be compatible with all browsers  http   www w3schools com tags att iframe seamless asp

User · Answer

After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.

You have to set the frameBorder attribute with a capital B.

<iframe frameBorder="0"></iframe>

User · Answer

In your stylesheet add      padding 0px    margin 0px    border  0px      This is also a viable option

User · Answer

To remove border you can use CSS border property to none    lt iframe src  myURL  width  300  height  300  style  border  none  gt Browser not compatible  lt  iframe gt

User · Answer

Either add the frameBorder attribute  or use style with border-width 0px   or set border style equal to none   use any one from below 3    x000D   x000D   lt iframe src  myURL  width  300  height  300  style  border-width 0px   gt Browser not compatible  lt  iframe gt  x000D   x000D   lt iframe src  myURL  width  300  height  300  frameborder  0  gt Browser not compatible  lt  iframe gt  x000D   x000D   lt iframe src  myURL  width  300  height  300  style  border none   gt Browser not compatible  lt  iframe gt  x000D   x000D   x000D

User · Answer

Its simple just add attribute in iframe tag frameborder   0   lt iframe src    width  200  height  200  frameborder  0  gt  lt  iframe gt

User · Answer

You can also do it with JavaScript this way  It will find any iframe elements and remove their borders in IE and other browsers  though you can just set a style of  border   none   in non-IE browsers instead of using JavaScript   AND it will work even if used AFTER the iframe is generated and in place in the document  e g  iframes that are added in plain HTML and not JavaScript    This appears to work because IE creates the border  not on the iframe element as you d expect  but on the CONTENT of the iframe--after the iframe is created in the BOM      amp        IE      Note  The IE part will only work  of course  if the parent window and iframe are from the SAME origin  same domain  port  protocol etc    Otherwise the script will get  access denied  errors in the IE error console  If that happens  your only option is to set it before it is generated  as others have noted  or use the non-standard frameBorder  0  attribute   or just let IE look fugly--my current favorite option       Took me MANY hours of working to the point of despair to figure this out     Enjoy                                                                                      Remove borders on iFrames  if  window document getElementsByTagName  iframe               var iFrameElements   window document getElementsByTagName  iframe          for  var i   0  i  lt  iFrameElements length  i                           iFrameElements i  frameBorder  0         For other browsers              iFrameElements i  setAttribute  frameBorder    0          For other browsers  just a backup for the above               iFrameElements i  contentWindow document body style border  none         For IE

User · Answer

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to  no  to prevent scrollbars from appearing     lt iframe src  myURL  width  300  height  300  frameBorder  0  scrolling  no  gt Browser not compatible   lt  iframe  gt

User · Answer

Add the frameBorder attribute  Capital    B        lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible   lt  iframe gt

User · Answer

1 Via Inline Style set border 0    lt iframe src  display file html  style  height  400px  width     100  border  0   gt HTML iFrame is not compatible with your browser     lt  iframe gt    2  Via Tag Attribute frameBorder Set 0   lt iframe src  display file html  width  300  height  300  frameborder  0  gt Browser not compatible  lt  iframe gt    3  if We have multiple I Frame We can give class and Put css in internal    or externally   HTML         lt iframe src  display file html  class  no border iframe  gt      HTML iFrame is not compatible with your browser   lt  iframe gt    CSS    lt style gt   no border iframe  border  0     or border none        lt  style gt

User · Answer

iframe src  XXXXXXXXXXXXXXX  marginwidth  0  marginheight  0  width  xxx  height  xxx    Works with Firefox

User · Answer

I had an issue with bottom white border and i could not fix it with border  margin  amp  padding rules     So add display block  because iframe is an inline element   This takes whitespace in your HTML into account

User · Answer

If you are using the iFrame to fit the width and height of the entire screen  which I am assuming you are not based on the 300x300 size  you must also set the body margins to  0  like this    lt body style  margin 0px   gt

User · Answer

Add the frameBorder attribute  note the capital    B       So it would look like    lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible  lt  iframe gt

User · Answer

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to  no  to prevent scrollbars from appearing     lt iframe src  myURL  width  300  height  300  frameBorder  0  scrolling  no  gt Browser not compatible   lt  iframe  gt

User · Answer

In your stylesheet add      padding 0px    margin 0px    border  0px      This is also a viable option

User · Answer

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to  no  to prevent scrollbars from appearing     lt iframe src  myURL  width  300  height  300  frameBorder  0  scrolling  no  gt Browser not compatible   lt  iframe  gt

User · Answer

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to  no  to prevent scrollbars from appearing     lt iframe src  myURL  width  300  height  300  frameBorder  0  scrolling  no  gt Browser not compatible   lt  iframe  gt

User · Answer

Add the frameBorder attribute  note the capital    B       So it would look like    lt iframe src  myURL  width  300  height  300  frameBorder  0  gt Browser not compatible  lt  iframe gt

User · Answer

If you are using the iFrame to fit the width and height of the entire screen  which I am assuming you are not based on the 300x300 size  you must also set the body margins to  0  like this    lt body style  margin 0px   gt

User · Answer

After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.

You have to set the frameBorder attribute with a capital B.

<iframe frameBorder="0"></iframe>

User · Answer

Style property can be used  For HTML5 if you want to remove the boder of your frame or anything you can use the style property  as given below   Code goes here   lt iframe src  demo htm  style  border none   gt  lt  iframe gt

User · Answer

lt iframe src  URL  frameborder  0  width  100   height  200  gt   lt p gt Your browser does not support iframes  lt  p gt   lt  iframe gt    lt iframe frameborder  1 0  gt    OR    lt iframe src  URL  width  100   height  300  style  border  none  gt Your browser  does not support iframes  lt  iframe gt   The  lt iframe gt  frameborder attribute is not supported in HTML5  Use CSS  instead

User · Answer

As per iframe documentation  frameBorder is deprecated and using the  border  CSS attribute is preferred    lt iframe src  test html  style  width  100   height  400px  border  0  gt  lt  iframe gt     Note CSS border property does not achieve the desired results in IE6  7 or 8

[html] Remove border from IFrame

Examples related to html

Examples related to css

Examples related to iframe

Examples related to internet-explorer-6

Examples related to noborder