How to Remove Border from the <iframe> Tag

This article explains the usage of the frameBorder attribute. This attribute is deprecated now. It still works but it's better to use the CSS border property.

The HTML <iframe> tag is used to define an inline frame.

It is possible to remove borders from the <iframe> tag by using the frameBorder attribute. In this snippet, you can see how this can be done. We’ll need the following syntax:

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

frameBorder="value";

Here, the “B” letter should be capital, otherwise, the browser will not recognize it. The frameBorder attribute can have two values: 0 (for disabling the border) and 1 (for enabling the border). Its default value is 1.

Create HTML

  • Use the <body> element.
  • Add an <h1> element within the <body>.
  • Add the <iframe> element with the src and frameBorder attributes within the <body>.
  • Use 0 as a value of the frameBorder attribute.
<body>
  <h1>Example</h1>
  <iframe src="https://www.w3docs.com/" frameBorder="0"></iframe>  
</body>

Add CSS

iframe {
  height: 250px;
  width: 300px;
  background-color: #c6c7af;
}

body {
  text-align: center;
}

The result of our code looks like the following.

Example of removing borders from the <iframe> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      iframe {
        height: 250px;
        width: 300px;
        background-color: #c6c7af;
      }
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <iframe src="https://www.w3docs.com/" frameBorder="0"></iframe>
  </body>
</html>