HTML frameborder Attribute

What You’ll Learn

The frameborder attribute controls whether a visible border is drawn around <iframe> elements and legacy <frame> elements. Use frameborder="0" for a seamless embed or frameborder="1" to show a border. In modern HTML, CSS is often preferred over this attribute.

Purpose of frameborder Attribute

The frameborder attribute determines whether a visible border should be drawn around embedded frames. It is typically applied to <iframe> elements when embedding external content, or to legacy <frame> elements inside obsolete <frameset> layouts.

Frames are deprecated for page layout, but frameborder remains useful for understanding older web pages and for quickly toggling iframe borders in simple examples.

📝 Syntax

Add frameborder to an <iframe> with 0 or 1:

<!-- Border visible -->
<iframe src="example.html" frameborder="1"></iframe>

<!-- No border (common for embeds) -->
<iframe src="example.html" frameborder="0"></iframe>

Syntax Rules

• Valid on <iframe> and legacy <frame> elements.
• Values are "0" (no border) or "1" (border shown).
• On iframe, the attribute is obsolete in HTML5 but browsers still honor it.
• For new projects, CSS border gives finer control over width, color, and style.

💎 Values

The frameborder attribute accepts two main values:

• 1 — A border is drawn around the frame. This was the historical default in many browsers.
• 0 — No border is drawn. Common for embedded maps, videos, and widgets that should blend into the page.

<iframe src="/map" frameborder="0" width="600" height="400"></iframe>

Applicable Elements

frameborder vs CSS border

Examples Gallery

iframe with border, borderless embed, legacy frameset frames, and dynamic frameBorder with JavaScript.

<iframe src="example.html" frameborder="1" width="400" height="300"></iframe>

<iframe
  src="https://example.com/widget"
  frameborder="0"
  width="100%"
  height="400"
  title="Embedded widget"></iframe>

<!-- Modern CSS equivalent -->
<style>
  iframe { border: none; }
</style>

<iframe id="dynamicFrame" src="example.html"></iframe>

<script>
  var frame = document.getElementById("dynamicFrame");
  frame.frameBorder = "0";
</script>

♿ Accessibility

• Always set title on iframes — Describes embedded content for screen reader users.
• Borders are visual only — Removing borders does not remove the need for accessible iframe labels.
• Consider focus management — Users must be able to tab into iframe content when appropriate.
• Avoid excessive nesting — Frames and iframes add complexity for assistive technology.

💡 Best Practices