Appearance
How to Remove Border from the <iframe> Tag
WARNING
The frameBorder attribute is deprecated. It still works but it's better to use the CSS border property.
The HTML <iframe> tag is used to define an inline frame.
It is possible to remove borders from the <iframe> tag by using the CSS border property. In this snippet, you can see how this can be done. We’ll need the following syntax:
How to Remove Border from the <iframe> Tag
css
iframe {
border: none;
}The border property set to none removes the default border around the <iframe> element. This is the modern, standards-compliant way to style iframes.
Create HTML
- Use the
<body>element. - Add an
<h1>element within the<body>. - Add the
<iframe>element with the src attribute within the<body>.
How to Remove Border from the <iframe> Tag
html
<body>
<h1>Example</h1>
<iframe src="https://www.w3docs.com/"></iframe>
</body>Add CSS
- Set the height and width of the
<iframe>element, specify the background-color, and remove the border usingborder: none. - Set the text-align property to “center” for the
<body>element.
How to Remove Border from the <iframe> Tag
css
iframe {
height: 250px;
width: 300px;
background-color: #c6c7af;
border: none;
}
body {
text-align: center;
}The result of our code looks like the following.
Example of removing borders from the <iframe> element:
Example of removing borders from the <iframe> element:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
iframe {
height: 250px;
width: 300px;
background-color: #c6c7af;
border: none;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Example</h1>
<iframe src="https://www.w3docs.com/"></iframe>
</body>
</html>