<p>How would I remove the border from an iframe embedded in my web app? An example of the iframe is:</p>

<pre><code>&lt;iframe src="myURL" width="300" height="300"&gt;Browser not compatible.&lt;/iframe&gt;
</code></pre>

<p>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.</p>

[{'answer_id': 65052, 'author': 'David Basarab', 'author_id': 2469, 'author_profile': 'https://Stackoverflow.com/users/2469', 'pm_score': 11, 'selected': True, 'text': '<p>Add the <code>frameBorder</code> attribute (note the <strong>capital ‘B’</strong>).</p>\n\n<p>So it would look like:</p>\n\n<pre><code>&lt;iframe src="myURL" width="300" height="300" frameBorder="0"&gt;Browser not compatible.&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 65126, 'author': 'xenox', 'author_id': 8952, 'author_profile': 'https://Stackoverflow.com/users/8952', 'pm_score': 6, 'selected': False, 'text': '<p>In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to "no" to prevent scrollbars from appearing. </p>\n\n<pre><code>&lt;iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no"&gt;Browser not compatible. &lt;/iframe &gt; \n</code></pre>\n'}, {'answer_id': 257406, 'author': 'Adam', 'author_id': 33503, 'author_profile': 'https://Stackoverflow.com/users/33503', 'pm_score': 7, 'selected': False, 'text': '<p>After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.</p>\n\n<p>You have to set the frameBorder attribute with a capital <strong>B</strong>.</p>\n\n<pre><code>&lt;iframe frameBorder="0"&gt;&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 4861373, 'author': 'Marnix Bras', 'author_id': 598204, 'author_profile': 'https://Stackoverflow.com/users/598204', 'pm_score': 5, 'selected': False, 'text': '<p>For browser specific issues also add <code>frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"</code> according to Dreamweaver:</p>\n\n<pre><code>&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;\n</code></pre>\n'}, {'answer_id': 8437926, 'author': 'Roberto Chiaretti', 'author_id': 1088611, 'author_profile': 'https://Stackoverflow.com/users/1088611', 'pm_score': 7, 'selected': False, 'text': '<p>As per <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" rel="noreferrer">iframe</a> documentation, frameBorder is deprecated and using the "border" CSS attribute is preferred:</p>\n\n<pre><code>&lt;iframe src="test.html" style="width: 100%; height: 400px; border: 0"&gt;&lt;/iframe&gt;\n</code></pre>\n\n<ul>\n<li>Note CSS border property does <strong>not</strong> achieve the desired results in IE6, 7 or 8.</li>\n</ul>\n'}, {'answer_id': 8979112, 'author': 'FirstFraktal', 'author_id': 1165845, 'author_profile': 'https://Stackoverflow.com/users/1165845', 'pm_score': 3, 'selected': False, 'text': "<p>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 &quot;border : none;&quot; 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)!</p>\n<p>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!!!)</p>\n<p>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 &quot;access denied&quot; 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=&quot;0&quot; attribute. (or just let IE look fugly--my current favorite option ;) )</p>\n<p>Took me MANY hours of working to the point of despair to figure this out...</p>\n<p>Enjoy. :)</p>\n<pre><code>// =========================================================================\n// Remove borders on iFrames\n\nvar iFrameElements = window.document.getElementsByTagName(&quot;iframe&quot;);\nfor (var i = 0; i &lt; iFrameElements.length; i++)\n{\n  iFrameElements[i].frameBorder=&quot;0&quot;;   //  For other browsers.\n  iFrameElements[i].setAttribute(&quot;frameBorder&quot;, &quot;0&quot;);   //  For other browsers (just a backup for the above).\n  iFrameElements[i].contentWindow.document.body.style.border=&quot;none&quot;;   //  For IE.\n}\n</code></pre>\n"}, {'answer_id': 17451583, 'author': 'David Tuite', 'author_id': 574190, 'author_profile': 'https://Stackoverflow.com/users/574190', 'pm_score': 3, 'selected': False, 'text': '<p>If the doctype of the page you are placing the iframe on is HTML5 then you can use the <code>seamless</code> attribute like so:</p>\n\n<pre><code>&lt;iframe src="..." seamless="seamless"&gt;&lt;/iframe&gt;\n</code></pre>\n\n<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" rel="noreferrer">Mozilla docs on the seamless attribute</a></p>\n'}, {'answer_id': 21143344, 'author': 'master of dissaster', 'author_id': 3199154, 'author_profile': 'https://Stackoverflow.com/users/3199154', 'pm_score': -1, 'selected': False, 'text': '<pre><code>iframe src="XXXXXXXXXXXXXXX"\nmarginwidth="0" marginheight="0" width="xxx" height="xxx"\n</code></pre>\n\n<p>Works with Firefox ;)</p>\n'}, {'answer_id': 24192742, 'author': 'th0ward', 'author_id': 3415690, 'author_profile': 'https://Stackoverflow.com/users/3415690', 'pm_score': 3, 'selected': False, 'text': "<p>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. </p>\n\n<pre><code>* {\n  padding:0px;\n  margin:0px;\n }\n</code></pre>\n"}, {'answer_id': 24671048, 'author': 'Shubham Badal', 'author_id': 2634872, 'author_profile': 'https://Stackoverflow.com/users/2634872', 'pm_score': 3, 'selected': False, 'text': '<p>Use the HTML iframe frameborder Attribute</p>\n\n<p><a href="http://www.w3schools.com/tags/att_iframe_frameborder.asp" rel="noreferrer">http://www.w3schools.com/tags/att_iframe_frameborder.asp</a></p>\n\n<p>Note: use frame<strong>B</strong>order (cap B) for IE, otherwise will not work. But, the iframe frameborder attribute is not supported in HTML5. So, Use CSS instead.</p>\n\n<pre><code>&lt;iframe src="http://example.org" width="200" height="200" style="border:0"&gt;\n</code></pre>\n\n<p>you can also remove scrolling using scrolling attribute\n<a href="http://www.w3schools.com/tags/att_iframe_scrolling.asp" rel="noreferrer">http://www.w3schools.com/tags/att_iframe_scrolling.asp</a></p>\n\n<pre><code>&lt;iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0"&gt;\n</code></pre>\n\n<p>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. <a href="http://www.w3schools.com/tags/att_iframe_seamless.asp" rel="noreferrer">http://www.w3schools.com/tags/att_iframe_seamless.asp</a></p>\n'}, {'answer_id': 28573794, 'author': 'Tropilac', 'author_id': 4391687, 'author_profile': 'https://Stackoverflow.com/users/4391687', 'pm_score': 3, 'selected': False, 'text': '<p>In your stylesheet add</p>\n\n<pre><code>{\n  padding:0px;\n  margin:0px;\n  border: 0px\n\n}\n</code></pre>\n\n<p>This is also a viable option.</p>\n'}, {'answer_id': 33294377, 'author': 'Shan Eapen Koshy', 'author_id': 3284379, 'author_profile': 'https://Stackoverflow.com/users/3284379', 'pm_score': 4, 'selected': False, 'text': '<p>You can use <code>style="border:0;"</code> in your iframe code. That is the recommended way to remove border in HTML5. </p>\n\n<p>Check out my <a href="http://codegena.com/generator/iframe-code-generator" rel="noreferrer">html5 iframe generator</a> tool to customize your iframe without editing code.</p>\n'}, {'answer_id': 36028076, 'author': 'Harden Rahul', 'author_id': 4956341, 'author_profile': 'https://Stackoverflow.com/users/4956341', 'pm_score': 3, 'selected': False, 'text': '<p>Add the frameBorder attribute (Capital ‘B’).</p>\n\n<pre><code>&lt;iframe src="myURL" width="300" height="300" frameBorder="0"&gt;Browser not compatible. &lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 38487002, 'author': 'Michael Herr', 'author_id': 6614949, 'author_profile': 'https://Stackoverflow.com/users/6614949', 'pm_score': 3, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;body style="margin:0px;"&gt;\n</code></pre>\n'}, {'answer_id': 39307736, 'author': 'IamGuest', 'author_id': 6790845, 'author_profile': 'https://Stackoverflow.com/users/6790845', 'pm_score': 3, 'selected': False, 'text': '<pre><code>&lt;iframe src="mywebsite" frameborder="0" style="border: 0px solid white;"&gt;HTML iFrame is not compatible with your browser&lt;/iframe&gt;\n</code></pre>\n\n<p>This code should work in both HTML 4 and 5.</p>\n'}, {'answer_id': 41484926, 'author': 'Ajesh Kolakkadan', 'author_id': 7271451, 'author_profile': 'https://Stackoverflow.com/users/7271451', 'pm_score': 2, 'selected': False, 'text': '<p>also set border="0px "  </p>\n\n<pre><code> &lt;iframe src="yoururl" width="100%" height="100%" frameBorder="0"&gt;&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 42175307, 'author': 'Arpan Saini', 'author_id': 7353562, 'author_profile': 'https://Stackoverflow.com/users/7353562', 'pm_score': 3, 'selected': False, 'text': '<p><strong>Style property can be used</strong> \nFor HTML5 if you want to remove the boder of your frame or anything you can use the style property. as given below </p>\n\n<p>Code goes here</p>\n\n<pre><code>&lt;iframe src="demo.htm" style="border:none;"&gt;&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 44858921, 'author': 'Amaan Iqbal', 'author_id': 8176563, 'author_profile': 'https://Stackoverflow.com/users/8176563', 'pm_score': 2, 'selected': False, 'text': '<p>Try</p>\n\n<pre><code>&lt;iframe src="url" style="border:none;"&gt;&lt;/iframe&gt;\n</code></pre>\n\n<p>This will remove the border of your frame.</p>\n'}, {'answer_id': 45252756, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>To remove border you can use CSS border property to none.</p>\n\n<pre><code>&lt;iframe src="myURL" width="300" height="300" style="border: none"&gt;Browser not compatible.&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 46261906, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>Use this</p>\n\n<pre><code>style="border:none;\n</code></pre>\n\n<p>Example:</p>\n\n<pre><code>&lt;iframe src="your.html" style="border:none;"&gt;&lt;/iframe&gt;\n</code></pre>\n'}, {'answer_id': 48166005, 'author': 'Divya Chugh', 'author_id': 9192311, 'author_profile': 'https://Stackoverflow.com/users/9192311', 'pm_score': 3, 'selected': False, 'text': '<p>Either add the frameBorder attribute, or use style with border-width 0px;, or set border style equal to none.</p>\n\n<p>use any one from below 3:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe src="myURL" width="300" height="300" style="border-width:0px;"&gt;Browser not compatible.&lt;/iframe&gt;\r\n\r\n&lt;iframe src="myURL" width="300" height="300" frameborder="0"&gt;Browser not compatible.&lt;/iframe&gt;\r\n\r\n&lt;iframe src="myURL" width="300" height="300" style="border:none;"&gt;Browser not compatible.&lt;/iframe&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 48856587, 'author': 'Chetan Chauhan', 'author_id': 7570937, 'author_profile': 'https://Stackoverflow.com/users/7570937', 'pm_score': 2, 'selected': False, 'text': '<p>Its simple just add attribute in iframe tag frameborder = 0 \n<code>&lt;iframe src="" width="200" height="200" frameborder="0"&gt;&lt;/iframe&gt;</code></p>\n'}, {'answer_id': 52228749, 'author': 'Md Shahriar', 'author_id': 4211947, 'author_profile': 'https://Stackoverflow.com/users/4211947', 'pm_score': -1, 'selected': False, 'text': '<pre><code>&lt;iframe src="URL" frameborder="0" width="100%" height="200"&gt;\n&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;\n&lt;/iframe&gt;\n\n&lt;iframe frameborder="1|0"&gt;\n\n(OR)\n\n&lt;iframe src="URL" width="100%" height="300" style="border: none"&gt;Your browser \ndoes not support iframes.&lt;/iframe&gt;\n\nThe &lt;iframe&gt; frameborder attribute is not supported in HTML5. Use CSS \ninstead.\n</code></pre>\n'}, {'answer_id': 60167355, 'author': 'Samir Lakhani', 'author_id': 6128516, 'author_profile': 'https://Stackoverflow.com/users/6128516', 'pm_score': 2, 'selected': False, 'text': '<p><strong>1.Via Inline Style set border:0</strong></p>\n\n<pre><code> &lt;iframe src="display_file.html" style="height: 400px; width:\n   100%;border: 0;"&gt;HTML iFrame is not compatible with your browser\n   &lt;/iframe&gt;\n</code></pre>\n\n<p><strong>2. Via Tag Attribute frameBorder Set 0</strong></p>\n\n<pre><code>&lt;iframe src="display_file.html" width="300" height="300" frameborder="0"&gt;Browser not compatible.&lt;/iframe&gt;\n</code></pre>\n\n<p><strong>3. if We have multiple I Frame We can give class and Put css in internal    or externally.</strong></p>\n\n<p><strong>HTML:</strong>     </p>\n\n<pre><code>&lt;iframe src="display_file.html" class="no_border_iframe"&gt;\n    HTML iFrame is not compatible with your browser \n&lt;/iframe&gt;\n</code></pre>\n\n<p><strong>CSS:</strong></p>\n\n<pre><code>&lt;style&gt;\n.no_border_iframe{\nborder: 0; /* or border:none; */\n}\n&lt;/style&gt;\n</code></pre>\n'}, {'answer_id': 60772418, 'author': 'menepet', 'author_id': 3074131, 'author_profile': 'https://Stackoverflow.com/users/3074131', 'pm_score': 0, 'selected': False, 'text': '<p>I had an issue with bottom white border and i could not fix it with border, margin &amp; padding rules ... So add <code>display:block;</code> because iframe is an inline element.</p>\n\n<p>This takes whitespace in your HTML into account.</p>\n'}, {'answer_id': 70296032, 'author': 'Japi Sandhu', 'author_id': 7989522, 'author_profile': 'https://Stackoverflow.com/users/7989522', 'pm_score': 2, 'selected': False, 'text': '<p>for me, adding worked perfectly</p>\n<pre class="lang-css prettyprint-override"><code>.iframe{\nbox-shadow: none !important;\n}\n</code></pre>\n<p>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.</p>\n'}]
['https://Stackoverflow.com/questions/65034', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2650/']