Remove border from IFrame using CSS

Last Updated : 30 Sep, 2024

The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0".

Syntax:

<iframe frameBorder="value"></iframe>

Note:
The frameBorder attribute is case-sensitive. The "B" in frameBorder must be capitalized; otherwise, the browser will not recognize it.
The possible values for frameBorder are 0 and 1. A value of 0 disables the border, while a value of 1 enables it. By default, the frameBorder value is set to 1.

Different Examples of Removing Border from Iframe

Example 1: In this example, the border of the iframe is disabled.

html

<!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: In this example, the border the border remains enabled.

html

<!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:

R

RahulRanjan4

Improve

Article Tags :

Similar Reads

Transition shorthand with multiple properties in CSS?

The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to

How to prevent line breaks in the list of items using CSS?

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element

How to remove the space between inline-block elements?

To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin

6 Best CSS frameworks You should Know to design Attractive Websites

If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz

Space between two rows in a table using CSS

The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp

What is the difference between display: inline and display: inline-block in CSS?

The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w

How to Write a:hover in Inline CSS?

The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff

How to place two div side-by-side of the same height using CSS?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which

What is a clearfix?

A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow

Making a div Vertically Scrollable using CSS

The overflow property in CSS controls how content that goes beyond an element's boundaries is handled. It can either hide the extra content or add scrollbars so users can scroll to see more without leaving the current view. This helps display large amounts of content, such as text, images, or tables