{"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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%3EBrowser%20%09%09%09not%20compatible.%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

Add the frameBorder attribute (note the capital \u2018B\u2019).<\/p>\n

So it would look like:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%20frameBorder%3D%220%22%3EBrowser%20not%20compatible.%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

You have to set the frameBorder attribute with a capital B.<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20frameBorder%3D%220%22%20%3E%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to \u201cno\u201d to prevent scrollbars from appearing.<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%20frameBorder%3D%220%22%20scrolling%3D%22no%22%3EBrowser%20not%20compatible.%20%3C%2Fiframe%20%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Using the \u201cborder\u201d CSS attribute works as well:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22wikitest.html%22%20style%3D%22width%3A%20100%25%3B%20height%3A%20400px%3B%20border%3A0%22%3E%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201d0\u2033 hspace=\u201d0\u2033 vspace=\u201d0\u2033 marginheight=\u201d0\u2033 marginwidth=\u201d0\u2033 according to Dreamweaver:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22wikitest.html%22%20name%3D%22banner%22%20width%3D%22300%22%20marginwidth%3D%220%22%20height%3D%22300%22%20marginheight%3D%220%22%20align%3D%22top%22%20scrolling%3D%22No%22%20frameborder%3D%220%22%20hspace%3D%220%22%20vspace%3D%220%22%3EBrowser%20not%20compatible.%20%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22\u2026%22%20seamless%3D%22seamless%22%3E%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Add the frameBorder attribute (Capital \u2018B\u2019).<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%20frameBorder%3D%220%22%3EBrowser%20not%20compatible.%20%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Add the frameBorder attribute. It\u2019s case-sensitive<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22iframe.php%22%20width%3D%22300%22%20height%3D%22300%22%20frameBorder%3D%220%22%20scrolling%3D%22no%22%3EBrowser%20not%20compatible%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Add the frameBorder attribute below to the iFrame tag<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22http%3A%2F%2Fgoogle.com%22%20frameBorder%3D%220%22%3E%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

In your stylesheet add<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%7B%0A%20%20padding%3A0px%3B%0A%20%20margin%3A0px%3B%0A%20%20border%3A%200px%0A%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22demo.htm%22%20style%3D%22border%3Anone%3B%22%3E%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"

PROBLEM : How to remove the border from an iframe embedded in web app? An example of the iframe is: [pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%3EBrowser%20%09%09%09not%20compatible.%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] SOLUTION 1: Add the frameBorder attribute (note the capital \u2018B\u2019). So it would look like: [pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22myURL%22%20width%3D%22300%22%20height%3D%22300%22%20frameBorder%3D%220%22%3EBrowser%20not%20compatible.%3C%2Fiframe%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] SOLUTION 2: You have […]<\/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}]}}