Latest Method to Change Facebook Like Box Border Color

As of today, this method still works. This may not work in the future as Facebook changes its support every now and then.

Anyway, here are the codes:

The CSS: .fb-like-box {   width: 348px;   height: 248px;   overflow: hidden;   position: relative;   border: 1px solid #dddddd; } .fb-like-box .dummyBox {   margin: -1px 0 0 -1px;   border: 0px; } The HTML: <div class="fb-like-box"> <div class="dummyBox"> <fb:like-box width="350" height="250" colorscheme="light" show_faces="true" stream="false" header="false"><iframe width="350px" height="250px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?color_scheme=light&amp;header=false&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F[Your FB Page Path]&amp;locale=en_US&amp;show_faces=true&amp;stream=false&amp;width=350&amp;height=250" style="border: none; visibility: visible; width: 350px; height: 250px;"></iframe> </div> </div>

Those in red are the ones you might want to change according to your preference. Those in green are the important settings to pay special attention to and also the locations where the magic comes from. Basically it is to enclose the FB iframe with two DIVs. One is to enclose to FB iframe with purposely 1 pixel smaller on each side to cover up the original FB like box border. The 2nd DIV is to shift the other DIV to upper left hand corder by 1 pixel using "margin: -1px 0 0 -1px;".

Hope you like this little trick. Enjoy!