How to Remove the Facebook Likebox Border

by adam on June 30, 2010

Facebook provides a nifty little likebox widget that can be customized to display your facebook pages current fans (or likers), but the widget comes with an ugly blue border that cannot be overridden with css because it is in a facebook iframe.

The Solution: Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox). Code below.

The HTML

     
<div id="likebox-frame">
     <iframe src="http://www.facebook.com/plugins/likebox.php?id=XXXXXX&amp;width=900&amp;connections=16&amp;stream=false&amp;header=false&amp;height=190" scrolling="no" frameborder="0" style="z-index:9;border:none !important; overflow:hidden; width:900px; height:190px;" allowtransparency="false"></iframe>
    </div>

The CSS

     
#likebox-frame{
 border:2px solid #F0F9F4;
 width:894px;
 z-index:10; 
 height: 156px; 
 overflow: hidden;
 position:relative;
 top:-1px; 
 left:-2px;
}

#likebox-frame iframe{
  left:-5px;
  overflow:hidden;
  position:relative;
  top:-1px;
}

39 comments

Thanx Adam it works fine!

by Marco Mattioli on July 17, 2010 at 11:40 pm. #

yes i did it!!!! great code

by reiearth on July 21, 2010 at 7:36 pm. #

[...] soluzione รจ di Adam Breckler, io mi sono limitato a verificarne l’esattezza. Sebbene il codice sia relativo al Like Box, [...]

by Rimuovere i bordi dal Like Box | Marco Mattioli on August 5, 2010 at 8:38 am. #

Very helpful! I would not have figured it out on my own.

by Rick D on September 5, 2010 at 5:02 pm. #

Genius… and simple! Why didn’t I think of this?! Thanks

by mark on September 7, 2010 at 7:19 am. #

works great for me!

http://echodittolabs.org/blogs/jeremy-john

by glassdimly on September 24, 2010 at 10:21 am. #

[...] caso e con qualsiasi override css. Cercando in rete abbiamo scovato questo articolo in inglese di Adam Breckler che propone una semplice soluzione. Ci suggerisce di creare un nuovo div con il bordo dello stesso [...]

by Nascondere il bordo del box “mi piace” di Facebook | Laboratorio CSS on October 9, 2010 at 6:18 am. #

You are awesome. That border made me want to vomit. Thanks for this!

by Jeff Tovar on November 4, 2010 at 7:24 pm. #

Great solution, works very well. Wonder why FB don’t realize that the iframe border are so annoying.

by Daniel Lantz on November 22, 2010 at 1:07 am. #

Brilliant code there! Thanks :)

by Brid on December 5, 2010 at 10:10 am. #

thank you so much adam, you did a great job, I’m the lover of css codes, I just reached here by google search I got problem. Your code help me to done my pixel perfect project, thanks again.

P.S: however I did a lots of tries to style entire element of iFrame but I didn’t get success, is there any possibilities that designers can style iFrame as they want or there is no freedom :(

-Usman

by Usman Arshad on December 21, 2010 at 5:24 am. #

Thanks Adam …. It was a great help

by Harjeet Singh on December 27, 2010 at 2:59 am. #

Great Tutorial it worked perfectly, thanks google i found you!

by tobiCOM on December 29, 2010 at 6:42 am. #

Nice solution, I just used it. Thank for sharing

by hussain on January 17, 2011 at 6:40 am. #

I had to make the following changes to get it to work
#likebox-frame iframe{
top:-10px;
}
and
#likebox-frame{
border:2px solid #fff;
width: (facebook widget width – 14)
height: (facebook widget height – 10)
}

by Sean Feeney on January 29, 2011 at 5:18 pm. #

Great! I even removed that ugly header and footer.
Thanks.

by Juul on February 28, 2011 at 6:08 am. #

i would really like to use ur code but i still dunno where to put it.. :/

by Pokii on April 13, 2011 at 1:56 am. #

Class!! nice one been trying to get rid of this for ages :P

by Matt Higgins on April 14, 2011 at 8:14 am. #

I’m unable to remove the lined border that wraps around the bottom and right side of my Facebook Like Box.

I would greatly appreciate help with this matter. Thanks!

by Matt Nassar on April 17, 2011 at 12:53 pm. #

Great! Thanks!

by Rupert on April 28, 2011 at 3:55 am. #

Worked great! Thanks so much….How about the border at the bottom..thanks.

by Ed Muntz on April 28, 2011 at 9:17 am. #

Thank you so much.
I was hating that gray-blue double border!

by ms aitch on May 11, 2011 at 10:01 am. #

Nice one. I used Sean Feeney’s tweaks to fit my width and it worked perfectly.

by Sinead on May 18, 2011 at 1:47 am. #

Apparently FB changed the markup of the like-box. If you have trouble removing the border in IE (or it suddenly is visible again without you changing anything) try applying the overflow:hidden to the div with class “fb_iframe_widget” like that:

.fb_iframe_widget {
overflow: hidden !important;
}

by tom on June 7, 2011 at 12:42 am. #

Remove the ‘Sign up’ from like-box iframe head and increase the width of iframe as 100% (in percentage) of facebook plugin .

by jusnit on September 2, 2011 at 10:13 pm. #

Many thanks for your sugguestion, we have implemented in our Palbin.com platform and now It works like a charm in all the online stores builded with palbin, like: http://www.piensobarato.net or http://www.mixydress.com, you can see the like box at the very left bottom of the page.
thanks again, alex
ps: I had to put a 3px border in transparent for my case, otherwise it showed 1px right border…

by Palbin, crear tienda online on September 15, 2011 at 9:13 am. #

Great post thanks – had to change positioning a bit but it works cross border even IE 7

by Jaimie Daly on September 26, 2011 at 9:23 am. #

I found this useful sometime ago, however, the new Facebook like box is a little bit different. I have written a post about this on my blog, you can see it here: http://itscoding.com/change-facebook-like-box-border-color Thanks for the post

by Mohamed Elgharabawy on September 29, 2011 at 7:09 am. #

Why not set border:none on #likebox-frame ? That works for me, I had a gradient background and setting the border to a color was not a solution for me.

by tob on November 16, 2011 at 11:56 pm. #

Thankyou it was great . . . . .

by Aaqib on November 24, 2011 at 9:51 pm. #

Thanks for your help! The right side and bottom were still showing so I just reduced the height and width size by 10px or so, problem solved!

by Tricia on January 5, 2012 at 1:44 am. #

really thanks man…this did the trick :D

by Gautam Doddamani on January 16, 2012 at 6:37 am. #

Thanks Man. It’s sad that you can’t customize the border from the server query. Shame on you Facebook!:)

by Lazlow on May 22, 2012 at 11:57 pm. #

Thank you very much Sir!!!

by Alex on June 4, 2012 at 3:55 am. #

Wow,

Had been looking to remove the border for long time and today I got it right. BTW, how to change the color if I don’t want to remove it entirely? TIA

by Mukesh on July 5, 2012 at 5:51 am. #

You can even directly use the facebook Likebox generator’s option of border color
Set the border color #FFF, if your background is white !
in case if image as background, problem may occur.

by Deepak Yadav on July 10, 2012 at 11:15 am. #

I can’t make any of that work. :/

I don’t think I know how to wrap. I can make about anything else I’ve attempted, happen though!

Can I email somebody my file and email it back? ;)

by Jason on September 16, 2012 at 12:51 pm. #

If your like box has a background colour in the style attribute part of the iframe, just make your border this color.

by Chris on October 21, 2012 at 3:01 pm. #

Current solution (17 DEC 2012):

Use the border_color parameter in your iframe code, just put the color of your site’s background by name (not hex).

You can find the color names here:
http://www.w3schools.com/html/html_colornames.asp

by Adam on December 17, 2012 at 7:47 am. #

Leave your comment

Required.

Required. Not published.

If you have one.