Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove border from Iframe using CSS?
To remove border from iframe using CSS can be useful when you don't want unwanted borders when integrating content from other sources on your webpage like YouTube videos, other webpages, etc. An iframe is an inline frame that allows us to embed another document within the current HTML document.
In this article, we will discuss various approaches to remove borders from iframes using CSS. We have an iframe window which displays the content of other webpages in our HTML document. Our task is to remove the border around the iframe window.
Syntax
iframe {
border: none;
/* or */
border-width: 0;
}
Method 1: Using CSS border Property
The most recommended approach is to use the CSS border property to completely remove the iframe border
<!DOCTYPE html>
<html>
<head>
<title>Remove Border from Iframe</title>
<style>
iframe {
border: none;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<h3>Iframe Without Border</h3>
<p>Using CSS border property to remove iframe border:</p>
<iframe src="/css/index.htm"></iframe>
</body>
</html>
An iframe displaying the CSS tutorial page appears with no visible border around it.
Method 2: Using CSS border-width Property
You can also use the border-width property to set the border width to zero, effectively hiding the border
<!DOCTYPE html>
<html>
<head>
<title>Remove Border from Iframe</title>
<style>
iframe {
border-width: 0;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<h3>Iframe Without Border</h3>
<p>Using CSS border-width property to remove iframe border:</p>
<iframe src="/css/index.htm"></iframe>
</body>
</html>
An iframe displaying the CSS tutorial page appears with no visible border (border width set to 0).
Method 3: Using HTML frameborder Attribute
While not a CSS method, the HTML frameborder attribute can also remove iframe borders. However, this attribute is deprecated in HTML5
<!DOCTYPE html>
<html>
<head>
<title>Remove Border from Iframe</title>
<style>
iframe {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<h3>Iframe Without Border</h3>
<p>Using frameborder attribute (deprecated):</p>
<iframe src="/css/index.htm" frameborder="0"></iframe>
</body>
</html>
An iframe displaying the CSS tutorial page appears with no visible border using the frameborder attribute.
Best Practices
- Use
border: noneas it's the most reliable and modern approach - Avoid the
frameborderattribute as it's deprecated in HTML5 - The
border-width: 0method works but doesn't completely remove the border properties
Conclusion
The CSS border: none property is the recommended method to remove iframe borders. While border-width: 0 and the HTML frameborder attribute work, using CSS provides better control and follows modern web standards.
8K+ Views
