How to remove iframe borders using CSS?

In this tutorial, we will learn how to remove iframe borders using CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

Creating borders is a regular deal for web developers, borders are created around the frames to make it look attractive and for various other reasons. Therefore, borders play a pretty important role to bring about the appearance of the website or web page. Various elements use borders, for example, the most commonly used, tables or grids or borders can be applied to images or various frames. But dealing with borders could sometimes prove to be tricky as well, as you wouldn't want your element to appear dull while surrounded by a border, as it sometimes happens that choosing the wrong color or wrong thickness could lead to the shabbiness of that particular element.

Remove iframe borders using CSS

Therefore, using borders is a smart way to make your website or web page look exciting and one must know where to apply and which type of border to apply so that the appearance of the elements is not ruined. Although, there are so many perks about using the borders there are times when you wish to remove borders from the web page or website and as a good developer you must know the solution to this problem, which is in turn quite easy. That brings us to our topic name How to remove Iframe Borders using CSS. Well, the answer is very simple but for that, you will have to move on to the next paragraph.

iframe's frameborder attribute

Now, that we know the use of borders and how it helps in improving the appearance of our website's elements, let us have a look at the topic at hand. So as mentioned earlier the solution to this problem is quite easy which is if you wish to remove Iframe Borders using CSS then you must make use of one of the Iframe tags called frameBorder and set its value to 0. Pretty easy right? Although while applying this method make sure that the letter B in frameBorder tag must be capital or else it will not be identified by the browser and the tag will not work.

Values for frameborder attribute

The frameBorder tag is a binary tag, which means it takes up to only two values 0 and 1. Where 0 is used to disable the border and vice versa 1 is used for enabling the border, however, the default value of this tag is set to 1. You will have to set it to 0 if you wish to remove the border.

Syntax to remove iframe borders using CSS

<iframe frameborder="1|0">

Example to remove iframe borders using CSS

<!DOCTYPE html>

<html>

<head>
    <style>
        iframe {
            height: 300px;
            width: 500px;
            background-color: blue;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>iframe border property</h2>
    <iframe src="https://www.includehelp.com/" frameBorder="0"></iframe>
</body>

</html>

Output

In the above example, the border around the iframe is disabled.

CSS Examples »

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

Difference between values of word-break 'break-all' versus 'break-word' in CSS