{"id":1813,"date":"2017-03-23T11:16:12","date_gmt":"2017-03-23T05:46:12","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1813"},"modified":"2017-03-28T18:28:08","modified_gmt":"2017-03-28T12:58:08","slug":"remove-border-from-iframe","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/remove-border-from-iframe\/","title":{"rendered":"[ Solved – 11 Answers ] HTML – Remove border from IFrame"},"content":{"rendered":"

How to remove the border from an iframe embedded in web app? An example of the iframe is:<\/p>\n

Html Code<\/span> <\/div> 
<iframe src="myURL" width="300" height="300">Browser \t\t\tnot compatible.<\/iframe><\/code><\/pre> <\/div>\n[ad type=”banner”]\n
Add the frameBorder attribute (note the capital \u2018B\u2019).<\/p>\n
So it would look like:<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.<\/iframe><\/code><\/pre> <\/div>\n
You have to set the frameBorder attribute with a capital B.<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe frameBorder="0" ><\/iframe><\/code><\/pre> <\/div>\n
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
 
 Html Code<\/span> <\/div> 
<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. <\/iframe ><\/code><\/pre> <\/div>\n
Using the “border” CSS attribute works as well:<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="wikitest.html" style="width: 100%; height: 400px; border:0"><\/iframe><\/code><\/pre> <\/div>\n
Note CSS border property does not achieve the desired results in IE6, 7 or 8.<\/p>\n
For browser specific issues also add frameborder=”0″ hspace=”0″ vspace=”0″ marginheight=”0″ marginwidth=”0″ according to Dreamweaver:<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="wikitest.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><\/code><\/pre> <\/div>\n[ad type=”banner”]\n
If the doctype of the page we are placing the iframe on is HTML5 then we can use the seamless attribute like:<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="..." seamless="seamless"><\/iframe><\/code><\/pre> <\/div>\n
Add the frameBorder attribute (Capital \u2018B\u2019).<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. <\/iframe><\/code><\/pre> <\/div>\n
Add the frameBorder attribute. It\u2019s case-sensitive<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="iframe.php" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible<\/iframe><\/code><\/pre> <\/div>\n
Add the frameBorder attribute below to the iFrame tag<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="http:\/\/google.com" frameBorder="0"><\/iframe><\/code><\/pre> <\/div>\n
In your stylesheet add<\/p>\n
 
 Css Code<\/span> <\/div> 
{  padding:0px;  margin:0px;  border: 0px}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
Style property can be used For HTML5 if we want to remove the border of the frame or anything that can use the style property. as given below<\/p>\n
 
 Html Code<\/span> <\/div> 
<iframe src="demo.htm" style="border:none;"><\/iframe><\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
PROBLEM : How to remove the border from an iframe embedded in web app? An example of the iframe is: [ad type=”banner”] SOLUTION 1: Add the frameBorder attribute (note the capital \u2018B\u2019). So it would look like: SOLUTION 2: You have to set the frameBorder attribute with a capital B. SOLUTION 3: In addition to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[3863,3866,3864,3860,3862,3873,3869,3872,3871,3874,3870,3868,3861,3865,3867],"class_list":["post-1813","post","type-post","status-publish","format-standard","hentry","category-html","tag-how-do-i-get-rid-of-an-iframe-border","tag-how-to-remove-an-iframe-border-in-ie8","tag-how-to-style-iframes-with-css","tag-html-competely-removing-an-border","tag-html-iframe-frameborder-attribute","tag-iframe-border-color","tag-iframe-border-css","tag-iframe-frameborder-css","tag-iframe-no-border-full-page","tag-iframe-no-border-html5","tag-iframe-no-scroll","tag-iframe-remove-border-and-padding","tag-javascript-iframe-without-border-and-scroll-in-popup","tag-remove-border-from-iframe","tag-remove-iframe-scrollbar"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1813"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1813\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}