95

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?

Thanks.

6 Answers 6

72

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 HTML5

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:

  1. Keep using frameborder, just to be sure it works (for now)
  2. Use CSS, to do the "right" thing
  3. 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.

10
  • 33
    So is there a way to produce frameBorder=0 in CSS?
    – JD Isaacks
    Aug 30, 2010 at 16:23
  • 1
    That's really annoying, I'm using the latest Chrome and it just doesnt work. Although frameborder="0" does.
    – RGBK
    Nov 7, 2010 at 21:11
  • 2
    seamless is not functionally equivalent to frameBorder=0. For example, the CSS from the containing page can cascade into the iframe itself, and links open in the context of the child page.
    – djd
    Jul 10, 2013 at 3:50
  • 9
    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! Jul 21, 2013 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.
    – rvighne
    Jul 21, 2016 at 1:51
51

As per the other posting here, the best solution is to use the CSS entry of

style="border:0;"
6
  • 6
    I think they recommend: border-width: 0px TBH. border: none; will NOT work. Jul 21, 2013 at 20:39
  • 5
    @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. Jul 27, 2013 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. Jul 31, 2015 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. Aug 16, 2015 at 22:05
  • 1
    Now that seamless has been dropped from the spec this is the only correct answer
    – rvighne
    Jul 21, 2016 at 1:51
18

Since the frameborder attribute is only necessary for IE, there is another way to get around the validator. This is a lightweight way that doesn't require Javascript or any DOM manipulation.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->
5
  • 4
    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. May 3, 2014 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 Lister
    May 3, 2014 at 6:30
  • The attribute is in the HTML5 “standard”: w3.org/TR/html5/rendering.html#frames-and-framesets May 3, 2014 at 7:46
  • @JukkaK.Korpela Wait, what? Then why would the OP get a validation error? Oh, sorry, the page you link to is about frame and frameset, not iframe. The attribute is obsolete on the iframe element; see w3.org/TR/html5/obsolete.html#attr-iframe-frameborder
    – Mr Lister
    May 4, 2014 at 7:36
  • 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. May 4, 2014 at 7:54
6

This works

iframe{
    border-width: 0px;
}
2

How about using the same for technique for "fooling" the validator with Javascript by sticking a target attribute in XHTML <a onclick="this.target='_blank'">?

  • onsomething = " this.frameborder = '0' "

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

Or getElementsByTagName]("iframe")1 adding this attribute for all iframes on the page?

Haven't tested this because I've done something which means that nothing is working in IE less than 9! :) So while I'm sorting that out ... :)

0

I found a nice work around that will allow it to work in IE7 here. It bypasses the validator for the frameBorder attribute but keeps css for future browsers as explained in the post.

2
  • 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.
    – Raptor
    Oct 11, 2013 at 3:11
  • Yes, however seamless was not working for me in IE7 hence my post.
    – sareed
    Jan 9, 2014 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.