Remove Border from Iframe Using CSS

To removing border from iframe using CSS can be useful when you don't want unwanted border when you integrate content from other sources on your webpage like youtube video, another webpage etc. An iframe is an inline frame that allows us to embed another document within the current HTML document.

In this article, we will be discussing various approaches to remove border from iframe using CSS. We are having an iframe window which display the content of other webpage in our HTML document. Our task is to remove the border around the iframe window.

Approaches to Remove Border from Iframe

Here is a list of approaches to remove border from iframe using CSS which we will be discussing in this article with stepwise explaination and complete example codes.

Removing Iframe Border using frameborder Attribute

To remove Border from iframe, we have used frameborder attribute. HTML frameborder attribute specifies whether to display iframe border or not.

  • We have set the dimension of iframe window using CSS height and width property.
  • We have used frameborder="0" attribute to remove the border from iframe.

Example

Here is a complete example code implementing above mentioned steps to remove the border from iframe using frameborder attribute.

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used 
        <strong>frameborder</strong> attribute to 
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/https/www.tutorialspoint.com/css/index.htm" frameborder="0">
    </iframe>
</body>
</html>

Removing Iframe Border using border Property

In this approach, we will be using border property which adds or removes border around an element. In this approach, we will be using border property on iframe.

  • We have set the dimension of iframe window using CSS height and width property.
  • We have used CSS "border: none;" property to remove border from iframe.

Example

Here is a complete example code implementing above mentioned steps to remove the border from iframe using CSS border property.

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            border: none;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used CSS
        <strong>border</strong> property to
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/https/www.tutorialspoint.com/css/index.htm"></iframe>
</body>
</html>

Removing Iframe Border using border-width Property

In this approach, we will be using border-width property which specifies border width of any element.

  • We have set the dimension of iframe window using CSS height and width property.
  • We have used CSS "border-width: 0;" property to set the border width value to 0 which removes border from iframe.

Example

Here is a complete example code implementing above mentioned steps to remove the border from iframe using CSS border-width property.

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            height: 200px;
            width: 400px;
            border-width: 0;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used CSS
        <strong>border-width</strong> property to
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/https/www.tutorialspoint.com/css/index.htm"></iframe>
</body>
</html>

Conclusion

In this article we have understood how to remove border from iframe using CSS. We discussed three approaches to remove border from iframe which are: using frameborder HTML attribute which takes either 0 or 1 as a value, using CSS border and using border-width property. CSS border-width property doesn't remove the border from iframe but hides the border due to zero width and in some browsers frameborder CSS property is deprecated, so using the CSS border property is recommended.

Updated on: 2024-08-05T14:41:32+05:30

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements