HTML5 and frameborder
HTML 5 doesn't support attributes such as frameborder, scrolling, marginwidth, and marginheight (which were supported in HTML 4.01). Instead, the HTML 5 specification has introduced the seamless attribute. The seamless attribute allows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.
According to MDN
frameborder
Obsolete since HTML5The value
1
(the default) draws a border around this frame. The value0
removes the border around this frame, but you should instead use the CSS property border to control borders.
Like the quote above says, you should remove the border with CSS;
either inline (style="border: none;"
) or in your stylesheet (iframe { border: none; }
).
That being said, there doesn't seem to be a single iframe provider that doesn't use frameborder="0"
. Even YouTube still uses the attribute and doesn't even provide a style attribute to make iframes backwards compatible for when frameborder isn't supported anymore. It's safe to say that the attribute isn't going anywhere soon. This leaves you with 3 options:
- Keep using
frameborder
, just to be sure it works (for now) - Use CSS, to do the "right" thing
- Use both. Although this doesn't resolve the incompatibility problem (just like option 1), it does and will work in every browser that has been and will be
As for the previous state of this decade-old answer:
The seamless
attribute has been supported for such a short time (or not at all by some browsers), that MDN doesn't even list it as a deprecated feature. Don't use it and don't get confused by the comments below.
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
As they state themselves "The frameborder attribute is not supported in HTML5. Use CSS instead."
The equivalent of frameborder in css is border: 0px;
. Add it to your iframe in css.
Remove border from IFrame
Add the frameBorder
attribute (note the capital ‘B’).
So it would look like:
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
HTML5 CSS3 and IFRAMES?
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
HTML5 iFrame Seamless Attribute
It's not supported correctly yet.
Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.
how do i create a border around iframe?
If you want to use inline HTML styling:
<iframe src="https://link_to_my_file/file.pdf"
style="width:1000px; height:300px; border: 1px solid black;"></iframe>
Related Topics
Change All Variable Value Based on Body Class
Chrome Cut Off Oswald-Light Font
How to Center Align a Child Div Inside a Parent Div with CSS
CSS Not Working on Django Password Form Field
Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump
Give Space Above and Below a Div
What Is the Best Method for Tidying CSS
How to Tell Gulp to Skip or Ignore Some Files in Gulp.Src([...])
Selecting an Element That Doesn't Have a Child with a Certain Class
Css: Fit Relative Positioned Parent to Height of Absolute Positioned Child
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
How to Load CSS File Dynamically
In ASP.NET.Mvc, What Is the Correct Way to Reference Images Inside of CSS
Resource Interpreted as Script But Transferred with Mime Type Text/X-C++
How to Have a Child Element Behind His Parent Element with Z-Index