Hi,
Embedding works great !! However, I have seen that a grey border appears around the embedded charts. Is there any way this can be removed ? I was thinking a css style in one of the cells might do the work, but then which element should I target and which attribute ?
Something like this:
XX? {
border: 0px solid
}
Thanks
Hi @rezpe, I don’t see this; could you post an example? You can use iframe embeds on this forum if you put the iframe tag embed code on its own line.
I’ll send an image of an example:
As you can see, I have put the background in red and we can clearly see the grey border in the embed. My question is if we can remove that.
Thanks,
Sebas
Here’s a live example:
There’s clearly a thin border around the whole thing. I suspect @thomasballinger that you’re not seeing it since you’re so accustomed to thinking it’s supposed to be there. 
Firefox’s inspector indicates that the body of the outermost iframe in an embed has the style “border: solid 1px #eee”. I guess that’s what’s causing it. Unfortunately, I don’t know that it’s possible to get at this CSS. A style block in your HTML document containing the iframe won’t affect elements in side the iframe and you can’t get to it from code within your notebook either.
Hmm… I definitely see it in both very new Firefox and Chrome on my MacBook Pro. It really looks like quite intentional but it’s only 1px #eee, so it’s quite subtle:
Ah, you’re referring to that border. Yeah, that one is enforced by the embed document served by Observable, and (afaik) can’t be removed by either the notebook or the embedding page.
Yes, because I think that’s what the OP is referring to! 
I agree with your diagnosis.
Ah thanks for the clarifying diagram! Yes I see that border. It’s helpful to hear that you’d like to get rid of this. Beyond attribution of the author of the notebook being important to us, we can talk about customizing the look of the embed. We chose that border because it seemed helpful in the common case to have a border that outside styles couldn’t inadvertently modify, but I can see how it’s frustrating that it’s out of your control. Note taken!
Thanks for the answer ! Well, the use case is to use a visualization made by me on observable in my own website. So I do not require credits nor border for this. I do not know if you have considered this use case.
I would recommend using embedding using the “Runtime with Javascript” option, since it’s highly configurable allowing you to do exactly what you want and much more.
I would only recommend using the iframe embed if you we’re working with restricted environment that’s specifically configured to force you to use an iframe. Examples include this forum and certain Wordpress configurations.
Other examples of sites that restrict one to iFrames may include Slack, Skype, MS Teams, Twitter, GitHub, and probably most other social sites. Admittedly, this is pure speculation as I am not social outside of this forum and nothing stated here is tested.
Seems like it might be possible in Microsoft Teams (https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/content-page), but none of the rest of those support iframes, sadly!
(Seconding Tom, the border was a deliberate choice to demarcate the Iframe, which is more of a black box than the Runtime methods, since it’s hosted on observablehq.com with Observable styles. Seconding mcmcclur, if you want deeper integration / customization, you can use “Runtime with JavaScript”.)
Wow, sad news for social sites! Thanks, @tophtucker! I owe you a thank you and follow-up on another thread. I am sure you know I appreciate all you do!
