Tutorialspoint.dev

Remove border from IFrame using CSS

The Iframe is used to display a web page on the webpage. Remove border from iframe tag in the webpage could be done by using one of the CSS properties of the iframe tag called frameBorder and set its value to “0”.

Syntax:

frameBorder = "value";

Note: In the frameBorder property the B letter must be in capital otherwise it will not be recognized by the browser. The value taken by the frameBorder property are 0 and 1, where 0 is used to disable the border and 1 is used for enabling the border property. By default, the value is set to 1.

Example 1:

<!DOCTYPE html>
<html>
    <head>
        <title>Disable Iframe Border</title>
        <style>
            iframe {
                height:200px;
                width:400px;
                background-color:lightgreen;
            }
            h1 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>iframe border property</h2>
  
        <!-- We do not use border by specifying value 0 -->
        <iframe src=# frameBorder="0"></iframe
    </body>
</html>                    

Output:

Example 2:

<!DOCTYPE html>
<html>
    <head>
        <title>Disable Iframe Border</title>
        <style>
            iframe {
                height:200px;
                width:400px;
                background-color:green;
            }
            h1 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>iframe border property</h2>
  
        <!-- We use border by specifying a non-zero value -->
        <iframe src=# frameBorder="1"></iframe
    </body>
</html>                    

Output:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter