I have an iframe on an HTML5 document. when I validate I am getting an error telling me that the attribute on the iframe frameBorder is obsolete and to use CSS instead.

I have this attribute frameBorder="0" here because it was the only way I could figure out how to get rid of the border in IE, I tried border:none; in CSS with no luck. Is there a compliant way to fix this?

7 Answers
7

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.

The value 1 (the default) draws a border around this frame. The value 0 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.

So is there a way to produce frameBorder=0 in CSS?
– JD IsaacksAug 30 '10 at 16:23

1

That's really annoying, I'm using the latest Chrome and it just doesnt work. Although frameborder="0" does.
– RGBKNov 7 '10 at 21:11

1

revisiting this, seamless does work on chrome ff and safari. Put it in the iframe like so : <iframe seamless
– RGBKMar 18 '11 at 16:58

8

Your supposed to use border-width: 0px;, but I'm afraid that this is not cross-browser compatible either for use with iframes. seamless is still not supported by all browsers! This is one of those few HTML5 issues that you just have to accept. Use frameborder="0" and the hell with the validation!
– Solomon ClossonJul 21 '13 at 20:38

2

seamless has been removed from the HTML5 spec, so there will never be support for it. @ForTheWatch's answer is now the best.
– rvighneJul 21 '16 at 1:51

@cnotethegr8 - It doesn't work in IE and Opera (current version), haven't tested in Chrome, Safari, and/or Firefox. I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others.
– Solomon ClossonJul 27 '13 at 2:18

2

@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others. My god that naïve. If you want to make sure your app works in a browser you have to test in that browser, plain and simple. There are no guarantees, only quirks.
– Jonathan DumaineJul 31 '15 at 16:18

1

Quick note is that the unit in 0px is redundant. I prefer margin: 0; or border: 0; because 0px == 0em == 0% == 0 when it comes to CSS.
– csharpforevermoreAug 16 '15 at 22:05

1

Now that seamless has been dropped from the spec this is the only correct answer
– rvighneJul 21 '16 at 1:51

This is the best answer to the question asked. However, the goal of compliance to HTML5 (which is work in progress and may and will change without notice) is not useful, especially when it makes you use tricks that do not serve any other purpose than such compliance and that make the code more complicated. It is best to keep using frameBorder="0" if you don’t want a border around an inline frame.
– Jukka K. KorpelaMay 3 '14 at 5:58

Absolutely true. Just want to note that as the frameborder attr is purely presentational, there is not much chance that it will ever return to the HTML standard, no matter how much the standard is changing.
– Mr ListerMay 3 '14 at 6:30

The validation error is issued because the feature is declared obsolete, which really does not mean much more than issuing the message. The attribute is still defined in HTML5 and browsers are expected, according to HTML5 CR, to keep supporting it.
– Jukka K. KorpelaMay 4 '14 at 7:54

use JavaScript to generate the iframe? it will further defer the load time of iframe contents for just eliminating a CSS warning message. Like accepted answer says, recommended to use seamless attribute instead.
– RaptorOct 11 '13 at 3:11

Yes, however seamless was not working for me in IE7 hence my post.
– sareedJan 9 '14 at 18:50