How to Remove a Frame Border?

To remove the visible border around an HTML <iframe>, you can use specific attributes or CSS styles. The most direct method, according to the provided reference, involves using an HTML attribute.

Removing <iframe> Borders Using HTML

The primary way to remove a border from an <iframe> directly within the HTML tag is by using the frameBorder attribute.

• Use the frameBorder attribute: Add the frameBorder attribute to your <iframe> tag and set its value to "0".
• Case Sensitivity: It is crucial to note that the frameBorder attribute is case-sensitive. The 'B' in frameBorder must be capitalized for browsers to recognize and apply the setting correctly.

Example:

<iframe src="your_page_url.html" frameBorder="0"></iframe>

By setting frameBorder="0", you instruct the browser not to render a border around the iframe content.

Alternative: Using CSS

While frameBorder is effective and easy, the more modern and recommended approach for styling elements, including removing borders, is often through CSS. You can achieve the same result by targeting the <iframe> element in your CSS and setting the border property to none.

Example using CSS:

<iframe src="your_page_url.html" style="border: none;"></iframe>

Or, using an external stylesheet or <style> block:

iframe {
  border: none;
}

Using CSS offers greater flexibility and separation of concerns compared to inline HTML attributes. However, the frameBorder attribute (specifically frameBorder="0") remains a common and supported method, especially for backward compatibility.

Using either the frameBorder="0" attribute or CSS border: none; will effectively remove the visible frame border from your <iframe>.