How to hide Facebook’s Like Box social plugin border

I was trying to make my own rounded-colored-cooler-looking border for the Like Box social plugin, and Facebook’s default border was getting in the way.

That’s what I eventually used:

<div id="likebox" style="background-image: url(../images/likebg.png); width: 286px; height: 156px; padding: 7px;">
	<div id="likebox-frame" style="width: 286px; height: 156px; overflow: hidden;">
		<iframe style="width: 288px; height: 155px; margin: -1px -4px 0 -4px;" frameborder="0" border="0" src="http://www.facebook.com/plugins/likebox.php?id=185550966885&amp;width=300&amp;connections=5&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
	</div>
</div>

So – what does it do?

• We have the #likebox element that sets the background image (that has rounded borders) and some padding, so the content won’t hide the border.
• The #likebox-frame element is just a dummy container to make the negative margins on the actual iframe (see below) work while the padding of #likebox still pushes the content inside. it needs height/width of the actual likebox content after removing the borders, which should be the same as #likebox inner height/width
• And now – for the actual iframe – we have 4 borders that facebook adds inside the iframe to hide. The top/left borders are hidden with a negative margin (top margin of -1px and left margin of -4px”) and the bottom/right borders are hidden because the iframe is bigger than its container – so it pushes it outside and the #likebox-frame overflow:hidden takes care of hiding it.

That’s it. Worked out quite nicely.