How to remove border from iframe

To remove the border of an <iframe> element in HTML, you can set the border property to 0 or none using CSS. Here are two methods to achieve this:

Method 1: Directly use the style attribute within the iframe tag

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

or

html
<iframe src="example.html" style="border:0;">
</iframe>

Method 2: Use a CSS file or <style> tag

In CSS, define a class for the iframe element and set the border property to 0 or none for that class.

html
<style>
  .no-border {
    border: none;
  }
</style>

<iframe class="no-border" src="example.html"></iframe>

Alternatively, to remove the border for all iframe elements on the page, directly apply styles to the iframe element:

html
<style>
  iframe {
    border: 0;
  }
</style>

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

Choose the appropriate method based on your specific needs. If your iframe is dynamically created using JavaScript, set the border property of the style attribute when creating the iframe element.

For browser-specific issues, use the attributes frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" as added by Dreamweaver:

html
<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>

Besides adding the frameBorder attribute, you may also need to set the scrolling attribute to 'no' to prevent scrollbars from appearing.

html
<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe>

According to the iframe documentation, the frameBorder attribute is deprecated; it is recommended to use the border CSS property instead:

html
<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>

• Note that the CSS border property may not function as expected in Internet Explorer 6, 7, or 8.