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.

Answer 1

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>

Answer 2

Try

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

This will remove the border of your frame.

Answer 3

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.

Answer 4

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

Answer 5

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