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:

<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>

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.

Just create a class like ".nb {border:none;}" inside the – Jim Apr 07 '16 at 12:27 — Jim, Apr 07 '16 at 12:27

score 1290 · Accepted Answer · edited Nov 19 '17 at 05:22

1290

Add the frameBorder attribute (note the capital ‘B’).

So it would look like:

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

edited Nov 19 '17 at 05:22

user229044

232,980
40
330
338

answered Sep 15 '08 at 17:45

David Basarab

72,212
42
129
156

6

Took me a minute to figure out in JavaScript you just need element.frameBorder=0. no .style and use 0, not '0' – anderspitman Aug 02 '14 at 23:34
28

When validating the document using [Markup Validation Service](http://validator.w3.org/check) `frameBorder` results in an error as it's not HTML5 compliant: _The frameborder attribute on the iframe element is obsolete. Use CSS instead._ In HTML5 I would set a CSS property of `border:0`. Is there a way to make it backward compatible without causing validation errors? – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Feb 26 '15 at 11:31
2

@MatthewT.Baker Sure, see my answer on one of the other many questions about this attribute: http://stackoverflow.com/a/20719286/1016716 Oops, I see I forgot the capital B in there; I'll edit. – Mr Lister Apr 09 '15 at 07:24
1

Wow @MrLister, it's almost as if I wrote it. Thanks for pointing me in the right direction! – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Apr 09 '15 at 09:23
17

@MartinAndersson http://caniuse.com/#feat=iframe-seamless states that it isn't supported at all. – Tim Büthe Jun 19 '15 at 11:19
3

The answer here is correct, however the comments suggesting usage of the seamless attribute are not longer correct. The seamless attribute has been remove from the specification: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-iframe-element – Ron E Oct 18 '16 at 16:49
1

Yeah,`seamless` is at time of writing (2017-09-11) not very well supported. or at all apparently. – demaniak Sep 11 '17 at 11:53
7

Note that while the JavaScript property is `frameBorder` with an uppercase B, the HTML attribute has actually always been case insensitive. And in XHTML it should be all lowercase `frameborder`. – Mr Lister Dec 11 '19 at 08:03

score 183 · Answer 2 · edited Apr 15 '20 at 17:30

183

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>

edited Apr 15 '20 at 17:30

johannchopin

13,720
10
55
101

answered Nov 02 '08 at 21:29

Adam

2,082
2
19
17

1

NOTE: frameborder attribute changes in F12 "debugger" will not be shown by IE6. Instead, add attribute in html code. – Sep 07 '11 at 11:15
Note that while the JavaScript property is `frameBorder` with an uppercase B, the HTML attribute has actually always been case insensitive. And in XHTML it should be all lowercase `frameborder`. – Mr Lister Dec 11 '19 at 08:05

score 127 · Answer 3 · edited Jun 13 '18 at 11:22

127

As per iframe documentation, frameBorder is deprecated and using the "border" CSS attribute is preferred:

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

Note CSS border property does not achieve the desired results in IE6, 7 or 8.

edited Jun 13 '18 at 11:22

Suraj Rao

29,388
11
94
103

answered Dec 08 '11 at 21:27

Roberto Chiaretti

11
1
2
2

xenox · Answer 4 · 2012-02-21T09:37:03.637

56

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to "no" to prevent scrollbars from appearing.

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

edited Feb 21 '12 at 09:37

answered Sep 15 '08 at 17:54

xenox

735
5
9

1

What's its equivalent in HTML5? – Oct 10 '16 at 16:09
3

style="overflow:hidden" – Apr 23 '17 at 02:11

score 24 · Answer 5 · edited Dec 18 '15 at 15:35

24

For browser specific issues also add frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" according to Dreamweaver:

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>

edited Dec 18 '15 at 15:35

nicael

18,550
13
57
90

answered Feb 01 '11 at 10:23

Marnix Bras

1
1
3

score 13 · Answer 6 · answered Oct 23 '15 at 03:23

13

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.

answered Oct 23 '15 at 03:23

Shan Eapen Koshy

2,909
1
28
40

score 11 · Answer 7 · answered Jul 10 '14 at 07:45

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.

<iframe src="http://example.org" width="200" height="200" style="border:0">

you can also remove scrolling using scrolling attribute http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" 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. 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

score 11 · Answer 8 · answered Feb 11 '17 at 11:27

11

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

<iframe src="demo.htm" style="border:none;"></iframe>

answered Feb 11 '17 at 11:27

Arpan Saini

4,623
1
42
50

score 9 · Answer 9 · answered Jun 12 '14 at 19:43

9

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;
 }

answered Jun 12 '14 at 19:43

th0ward

285
3
7

score 9 · Answer 10 · edited Mar 19 '21 at 14:52

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. ($@&*#@!!! 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

var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < 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.
}

score 8 · Answer 11 · answered Mar 16 '16 at 06:17

8

Add the frameBorder attribute (Capital ‘B’).

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

answered Mar 16 '16 at 06:17

Harden Rahul

930
8
15

score 7 · Answer 12 · edited Apr 30 '15 at 12:15

7

In your stylesheet add

{
  padding:0px;
  margin:0px;
  border: 0px

}

This is also a viable option.

edited Apr 30 '15 at 12:15

davethecoder

3,856
4
35
66

answered Feb 18 '15 at 00:25

Tropilac

47
1
6

frameBorder didn't work for me, but this did. Thanks. – Dois Oct 02 '15 at 08:45

Divya Chugh · Answer 13 · 2018-01-09T10:30:09.410

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:

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

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

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>

score 6 · Answer 14 · answered Jul 03 '13 at 15:06

6

If the doctype of the page you are placing the iframe on is HTML5 then you can use the seamless attribute like so:

<iframe src="..." seamless="seamless"></iframe>

Mozilla docs on the seamless attribute

answered Jul 03 '13 at 15:06

David Tuite

22,258
25
106
176

6

*seams* like a great idea, but sadly is not well supported. http://caniuse.com/#search=seamless – code_monk Oct 26 '14 at 13:32
6

It is not supported at all. – skobaljic Apr 10 '15 at 10:29
2

It was even removed from the doc – Tofandel Jul 12 '21 at 11:34

score 6 · Answer 15 · answered Jul 20 '16 at 17:24

6

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:

<body style="margin:0px;">

answered Jul 20 '16 at 17:24

Michael Herr

1
1
1

score 5 · Answer 16 · answered Sep 03 '16 at 13:59

5

<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

This code should work in both HTML 4 and 5.

answered Sep 03 '16 at 13:59

IamGuest

1
1
1

score 4 · Answer 17 · answered Jan 05 '17 at 12:17

4

also set border="0px "

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>

answered Jan 05 '17 at 12:17

Ajesh Kolakkadan

71
2
12

score 4 · Answer 18 · answered Jul 01 '17 at 08:31

4

Try

<iframe src="url" style="border:none;"></iframe>

This will remove the border of your frame.

answered Jul 01 '17 at 08:31

Amaan Iqbal

761
2
9
25

score 4 · Answer 19 · answered Sep 17 '17 at 08:01

4

Use this

style="border:none;

Example:

<iframe src="your.html" style="border:none;"></iframe>

answered Sep 17 '17 at 08:01

score 4 · Answer 20 · answered Feb 11 '20 at 10:59

1.Via Inline Style set border:0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2. Via Tag Attribute frameBorder Set 0

<iframe src="display_file.html" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

3. if We have multiple I Frame We can give class and Put css in internal or externally.

HTML:

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS:

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>

score 3 · Answer 21 · answered Jul 22 '17 at 09:10

3

To remove border you can use CSS border property to none.

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>

answered Jul 22 '17 at 09:10

score 2 · Answer 22 · answered Feb 18 '18 at 21:08

2

Its simple just add attribute in iframe tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

answered Feb 18 '18 at 21:08

Chetan Chauhan

1
2

Before answering a question, always read the existing answers. This answer has already been provided. Instead of repeating the answer, vote up the existing answer. Some guidelines for writing good answers can be found [here](https://stackoverflow.com/help/how-to-answer). – dferenc Feb 18 '18 at 21:31

score 2 · Answer 23 · answered Dec 09 '21 at 20:03

for me, adding worked perfectly

.iframe{
box-shadow: none !important;
}

this solution is particularly for a shopify theme I am editing. The shopify theme uses iframes in different ways throughout the whole theme and one of them glitched. I had to go into the css manually and overide the css attribute.

score 0 · Answer 24 · answered Mar 20 '20 at 10:31

0

I had an issue with bottom white border and i could not fix it with border, margin & padding rules ... So add display:block; because iframe is an inline element.

This takes whitespace in your HTML into account.

answered Mar 20 '20 at 10:31

menepet

796
13
17

score -2 · Answer 25 · edited Jan 15 '14 at 17:06

-2

iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Works with Firefox ;)

edited Jan 15 '14 at 17:06

ndpu

22,225
6
54
69

answered Jan 15 '14 at 16:47

master of dissaster

1

different question perhaps? – Apr 23 '17 at 02:13

score -3 · Answer 26 · answered Sep 07 '18 at 19:43

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

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.

Remove border from IFrame

26 Answers26

Linked

Related