Introduction

If an embedded iframe shows an unwanted border, the modern fix is usually just CSS. In current HTML and CSS practice, border: 0 or border: none is the correct approach, while older HTML attributes such as frameborder="0" exist only for legacy compatibility.

The Modern CSS Fix

For one specific frame, inline CSS works:

1<iframe
2  src="https://example.com"
3  title="Example content"
4  style="border: 0;"
5  width="600"
6  height="400">
7</iframe>

For a reusable solution, put the rule in a stylesheet:

iframe.borderless {
  border: 0;
}

1<iframe
2  class="borderless"
3  src="https://example.com"
4  title="Example content"
5  width="600"
6  height="400">
7</iframe>

That is the preferred approach because it keeps presentation in CSS rather than in the markup.

Why frameborder="0" Is Not the Best Answer

Older code often uses:

<iframe src="https://example.com" frameborder="0"></iframe>

This still appears in old snippets and may still work in browsers, but it is obsolete in modern HTML. If you are maintaining existing markup, leaving it in place may be harmless, but new code should use CSS.

When the Border Is Not Actually on the iframe

Sometimes the visible line is not the frame border at all. It may come from:

• A border on the parent container
• A browser default outline
• A gap caused by inline layout or background contrast

If border: 0 does not appear to work, inspect the element in browser dev tools and confirm where the line is coming from.

For example, this container would still show a visible frame-like border even if the iframe itself had no border:

<div class="frame-shell">
  <iframe class="borderless" src="https://example.com" title="Example"></iframe>
</div>

1.frame-shell {
2  border: 1px solid #ccc;
3}
4
5.borderless {
6  border: 0;
7}

Make Embedded Frames Look Cleaner

If you want the embedded content to sit flush with the surrounding layout, it also helps to control display and sizing:

1iframe.borderless {
2  display: block;
3  width: 100%;
4  border: 0;
5}

display: block removes inline-element spacing surprises and often produces a cleaner layout when the frame fills a card or section.

Accessibility and Security Still Matter

Removing the border is only a visual concern. You should still provide a useful title so assistive technology can identify the embedded content.

1<iframe
2  class="borderless"
3  src="https://example.com/report"
4  title="Quarterly sales report">
5</iframe>

Also remember that iframes have security implications unrelated to styling. Depending on the use case, attributes such as sandbox, allow, or referrerpolicy may matter more than the border styling itself.

Styling Across Many Frames

If the site contains several embed types, use classes rather than styling every iframe globally. A global iframe { border: 0; } rule is simple, but it can accidentally affect admin tools, third-party widgets, or embeds that were supposed to keep a visible boundary.

A class-based rule keeps intent clear and avoids unintended design regressions.

Common Pitfalls

The biggest mistake is relying on frameborder="0" as if it were the modern standard. It is legacy markup; CSS is the proper solution in current code.

Another issue is assuming the line you see is definitely the frame border. Quite often it is the container, outline, or surrounding layout.

Developers also forget to add a title when focusing only on appearance. Removing the border should not make the embed less accessible.

Finally, avoid broad global CSS rules unless you truly want every iframe on the site to be borderless.

Summary

• Use CSS such as border: 0 or border: none to remove iframe borders.
• Prefer classes or stylesheets over obsolete frameborder="0" markup.
• If the line remains, inspect the container and surrounding layout, not just the iframe itself.
• Use display: block and explicit sizing when you want a flush embedded layout.
• Keep accessibility and security attributes in place even when the visual change is small.