Remove an Iframe Border in IE6 with HTML and CSS

You will learn how iframe borders work, how to remove the visible frame in IE6, and why styling the iframe element is different from styling the document loaded inside it.

An <iframe> embeds another HTML document inside the current page. Historically, browsers displayed a visible frame around iframes by default. In Internet Explorer 6, the most direct way to disable that frame is the legacy frameborder HTML attribute.

<iframe frameborder="0" src="myURL" width="300" height="300"></iframe>

Setting frameborder="0" tells IE6 not to draw the iframe's built-in border. CSS can also set the iframe element's border property to zero.

The iframe element belongs to the outer page. The page loaded through src is a separate document. Removing the iframe border does not automatically make the inner document match the outer page: its own margins, background, and layout may still create a visible edge.

For a seamless appearance, ensure that:

• The iframe itself has no border.
• The parent page and embedded page use compatible background colors.
• The embedded page does not have unwanted default body margins.

Think of an iframe as a picture frame containing another page.

• frameborder="0" removes the frame around the picture.
• CSS such as border: 0 removes decorative border styling applied to the frame.
• The document inside the frame is still its own picture, with its own background and spacing.

Removing the frame makes the boundary less visible, but both pictures must use matching colors if you want them to blend together.

Use frameborder="0" for the IE6-specific built-in frame, and optionally add CSS as a second declaration of intent.

<iframe
  src="myURL"
  width="300"
  height="300"
  frameborder="0"
  style="border: 0;"
>
  Browser not compatible.
</iframe>

Key parts:

• src="myURL": the URL of the document to embed.
• width and height: the displayed iframe dimensions.
• frameborder="0": disables IE6's traditional iframe border.
• style="border: 0;": removes a CSS border from the iframe element if one is applied.

If you control the embedded document, set its background and remove default page spacing too:

<style type="text/css">
  body {
    margin: 0;
    background: #ffffff;
  }
</style>

Use the same background color on the outer page when appropriate.

Consider this outer page markup:

<style type="text/css">
  body {
    background: #ffffff;
  }

  iframe {
    border: 0;
  }
</style>

<iframe
  src="embedded.html"
  width="300"
  height="300"
  frameborder="0"
>
  Browser not compatible.
</iframe>

Execution sequence:

1. IE6 loads the outer document and applies its white background.
2. IE6 finds the <iframe> element and reserves a 300 by 300 pixel area.
3. frameborder="0" prevents IE6 from drawing its legacy frame around that area.
4. The CSS rule iframe { border: 0; } ensures no CSS border is drawn on the iframe element.
5. IE6 requests and loads embedded.html inside the reserved area.
6. If embedded.html also has a white background and no unwanted margins, the two documents appear to meet without a visible border.

Removing an iframe border is useful when embedding content that should visually feel like part of a larger interface:

• An internal dashboard panel loaded as a separate legacy page.
• A report viewer embedded inside an administrative portal.
• A legacy payment, help, or document screen displayed in an application shell.
• An advertisement or media embed where the surrounding design should not show a frame.
• A shared widget hosted as a separate document but placed into an older intranet application.

In each case, the outer page controls the iframe's border, while the embedded document controls its own background and internal spacing.

In a legacy IE6 codebase, developers commonly centralize iframe presentation in a stylesheet and use frameborder="0" in the markup for browser compatibility.

<style type="text/css">
  .embedded-panel {
    border: 0;
    display: block;
  }
</style>

<iframe
  class="embedded-panel"
  src="reports/summary.html"
  width="600"
  height="400"
  frameborder="0"
  title="Summary report"
></iframe>

Useful project practices include:

• Use a class: A class such as .embedded-panel keeps iframe styling consistent.
• Keep a fallback attribute for IE6: frameborder="0" is especially relevant for the stated target browser.
• Control pages you own: For same-site embedded documents, set body { margin: 0; } and matching backgrounds in the embedded page.
• Treat external pages separately: If another site owns the iframe URL, you cannot reliably change its internal styles from the parent page.
• Add a title: It provides a text description of the embedded content for accessibility tools, even in legacy markup.

Removing only the CSS border

<iframe src="myURL" style="border: 0;"></iframe>

For the IE6-only requirement, also use frameborder="0". IE6 has a legacy built-in iframe frame behavior that the HTML attribute directly addresses.

<iframe src="myURL" frameborder="0" style="border: 0;"></iframe>

Using the wrong attribute spelling or value

<iframe frameborder="false" src="myURL"></iframe>

Use the numeric value 0:

<iframe frameborder="0" src="myURL"></iframe>

Expecting border removal to remove inner-page whitespace

<iframe src="embedded.html" frameborder="0"></iframe>

This removes the outer frame, but embedded.html may still show the browser's default body margin. When you control that page, use:

<style type="text/css">
  body { margin: 0; }
</style>

Trying to style a cross-origin iframe document

The parent page can style the <iframe> element itself, but it cannot generally read or modify the document loaded inside an iframe from a different origin. Match colors only when you control the embedded page or when the third-party page already provides a matching design.

Forgetting that an edge may be a background mismatch

If there is no border but a rectangle is still visible, compare the outer page background with the embedded document's html and body backgrounds.

frameborder is a legacy HTML attribute, while border is a CSS property. For an IE6-targeted page, using both is practical. In modern web development, CSS is normally preferred, but the target browser determines the compatibility approach here.

<!-- IE6-compatible borderless iframe -->
<iframe
  src="myURL"
  width="300"
  height="300"
  frameborder="0"
  style="border: 0;"
>
  Browser not compatible.
</iframe>

/* Reusable stylesheet rule */
iframe.borderless {
  border: 0;
  display: block;
}

<iframe
  class="borderless"
  src="myURL"
  width="300"
  height="300"
  frameborder="0"
></iframe>

Rules to remember:

• Use frameborder="0" for the IE6 legacy frame.
• Use border: 0 to remove CSS borders.
• Match backgrounds in both documents for a seamless result.
• Remove default body margins in the embedded document when you control it.
• The parent can style the iframe element, not arbitrary content inside a third-party iframe.

How do I remove an iframe border in IE6?

Set frameborder="0" on the iframe. You can also add style="border: 0;" or a stylesheet rule.

Is frameborder="0" enough for IE6?

It is the important IE6-specific setting for the built-in frame. Adding border: 0 is a useful extra safeguard if CSS borders are also present.

Why does my iframe still look like it has a border?

The visible edge may be caused by a different background color or the default margin inside the embedded document, rather than an iframe border.

How do I remove whitespace inside the iframe?

If you control the page loaded by the iframe, set its body margin to zero:

body { margin: 0; }

Can the parent page change the style of the page inside an iframe?

Only when browser security rules allow access, typically when both documents come from the same origin. A third-party iframe's internal document cannot generally be styled by the parent.

Does the fallback text appear in a supported browser?

No. Text between <iframe> and </iframe> is fallback content for browsers that cannot display the iframe.

• CSS borders — The border property controls a CSS-drawn edge around HTML elements.
• HTML iframe element — Understanding iframe attributes, dimensions, and fallback content helps when embedding documents.
• CSS background-color — Matching background colors helps adjacent documents visually blend together.
• CSS margin — Default body margins in the embedded document can look like an unwanted border.
• Same-origin policy — This explains why a parent page cannot freely modify content inside every iframe.
• Legacy browser compatibility — Older browsers may require HTML attributes and browser-specific compatibility considerations that modern browsers do not.