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:
