How to remove iframe borders using CSS?

Removing iframe borders: Here, we are going to learn how to remove iframe borders using CSS?
Submitted by Anjali Singh, on February 01, 2020


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.

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.


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.


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.


    <iframe frameborder="1|0">


<!DOCTYPE html>


        iframe {
            height: 300px;
            width: 500px;
            background-color: blue;
        body {
            text-align: center;

    <h2>iframe border property</h2>
    <iframe src="" frameBorder="0"></iframe>



CSS | Remove Iframe Borders Example

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

CSS Tutorial & Examples »

Comments and Discussions!

Copyright © 2023 All rights reserved.