Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove border from IFrame using CSS
We can use the ‘iFrame’ in HTML to embed the document in the HTML web page. For example, we can embed youtube videos in the web page using the ‘IFrame’ HTML tag.
The ‘iFrame’ contains the border by default. In this tutorial, we will learn various approaches to removing the border from the IFrame using CSS.
Use the Frameborder HTML Attribute
The ‘IFrame’ contains the ‘frameborder’ HTML attribute. It can have either ‘0’ or ‘1’ as a value. Using the ‘0’ as a value of the ‘frameBorder’ HTML attribute removes the border; otherwise, it adds the border to the ‘iFrame’.
Syntax
Users can follow the syntax below to use the ‘frameborder’ HTML attribute to remove the border from the IFrame.
<iframe width="424" height="238" src="https://www.youtube.com/embed/qZOlCFincuU" frameborder="0"></iframe>
In the above syntax, we have used the ‘frameborder’ CSS property with the ‘0’ value to remove the border from the IFrame.
Example
In the example below, we have embedded two different YouTube videos using the IFrame in the HTML document. With both IFrame, we have used the ‘frameborder’ HTML attribute.
In the output, users can observe that the first youtube video contains the border as we have used the ‘1’ as a value of the ‘frameborder’, and the second youtube video doesn’t contain the border as we have used the ‘0’ as a value of the ‘frameborder’.
<html> <body> <h3> Removing the border from iframe using the <i> frameBorder </i> CSS property </h3> <iframe width = "424" height = "238" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "1" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> <br> <br> <iframe width = "424" height = "238" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> </body> </html>
Use the ‘border’ Property of CSS
The ‘border’ CSS property is used to remove the border from any HTML element. Also, it is used to remove the border from the IFrame.
Syntax
Users can follow the syntax below to use the ‘border’ CSS property to remove the border from the IFrame.
iframe {
border: none;
}
In the above syntax, we have applied ‘border: none’ to the IFrame to remove the border.
Example
In the example below, we have used the ‘border’ CSS property to remove the border from the IFrame. Furthermore, we have used the ‘none’ as a value of the border.
In the output, users can observe that IFrame doesn’t contain the border.
<html>
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<h3> Removing the border from iframe using the <i> border: none </i> CSS property </h3>
<iframe width = "600" height = "300" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</body>
</html>
Example
In the example below, we have used the ‘border-width’ CSS property to remove the border from the IFrame. Here, we have specified the ‘0’ as a value of the ‘border-width’ property.
It gives similar output as the ‘border’ property.
<html>
<head>
<style>
iframe {
border-width: 0;
}
</style>
</head>
<body>
<h3> Removing the border from iframe using the <i> border-width: 0 </i> CSS property </h3>
<iframe width="600" height="300" src="https://www.youtube.com/embed/qZOlCFincuU" title="Patch Tool in Adobe Photoshop | Adobe Photoshop | Tutorials Point" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
Users learned to remove the border from the IFrame using the various properties. In the first approach, we have used the ‘frameborder’ HTML attribute, which takes either 0 or 1 as a value.
In the second approach, we have used the ‘border’ and ‘border-width’ CSS properties to remove the border of the IFrame. However, the ‘border-width’ property doesn’t remove the border from the IFrame but hides the border due to zero width. Also, In some browsers ‘frameborder’ CSS property is deprecated, so using the ‘border’ CSS property is recommended.
4K+ Views
