How to get rid of annoying iframe borders?

Question

Violin (this is the skeleton of my real code): http://jsfiddle.net/nkipe/6bhee8c8/
The code:
CSS

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; background: #FEFFFB; font-family: arial, verdana; } #layoutContainer { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; } #iframeHeader { width: 100%; height: 50px; border: 0; } #iframeStatusBar { width: 100%; height: 15px; border: 0; } #iframeMainMenu { width: 200px; height: 100%; } #iframeCenterContent { width: 100%; height: 100%; top: 65px; left: 200px; position: fixed; } #iframeFooter { width: 100%; height: 50px; bottom: 0px; left: 200px; position: fixed; } 

HTML

 <div id="layoutContainer"> <iframe id="iframeHeader" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> <iframe id="iframeStatusBar" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> <iframe id="iframeMainMenu" src="#"></iframe> <iframe id="iframeCenterContent" src="#"></iframe> <iframe id="iframeFooter" src="#"></iframe> </div> 

And when I run my actual code in Chrome, it appears as gray borders, as shown in this image:

Answer 1

just add this to your CSS:

 iframe { border: 0; } 

See the snippet below:

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; background: #FEFFFB; font-family: arial, verdana; } /*ADD THIS BELOW */ iframe { border: 0 ; } /*END*/ #layoutContainer { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; } #iframeHeader { width: 100%; height: 50px; border: 0; } #iframeStatusBar { width: 100%; height: 15px; border: 0; } #iframeMainMenu { width: 200px; height: 100%; } #iframeCenterContent { width: 100%; height: 100%; top: 65px; left: 200px; position: fixed; } #iframeFooter { width: 100%; height: 50px; bottom: 0px; left: 200px; position: fixed; } 

 <div id="layoutContainer"> <iframe id="iframeHeader" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> <iframe id="iframeStatusBar" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> <iframe id="iframeMainMenu" src="#"></iframe> <iframe id="iframeCenterContent" src="#"></iframe> <iframe id="iframeFooter" src="#"></iframe> </div> 

Answer 2

Apply this code in the css file iframe{border:none;} .

And check the link below

http://jsfiddle.net/6bhee8c8/1/

Answer 3

Another way to do this is frameBorder = "0", I see that you tried this but missed the uppercase letter "B"