Remove link border from around image

Question

For SP2010, how do you remove the ugly blue border from images that have a link on them? I've tried adding style="border:0" on the anchor tag but to no avail. Thanks.

Answer 1

You need to apply the style to the IMG, not the HREF.

This will show the blue border (at least in IE and Firefox, Chrome doesn't)

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png">
</a>

Neither of these will, first using the 'old style' border attribute

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png" border="0">
</a>

Next using inline styles

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png" style="border:none;">
</a>

And using CSS to take off the border for all images

<style>
   a img {border:none}
</style>
<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png">
</a>

Answer 2

Add a Content Editor Webpart to the affected page. Edit the HTML for the webpart. Paste in the following text:

<style>
   a img {border:none}
</style>

This will remove borders from all images with links on the page.

Answer 3

Within SharePoint Designer right click on the image's web part and select picture properties, select appearance and change border thickness to 0 and the blue border disappears.

Answer 4

Your styling the wrong element, you need to style the links. http://www.w3schools.com/css/css_pseudo_classes.asp

You can view styles applied by using the IE Developer tool, FireBug in Firefox, or Chrome developer tool.

Good blogs to keep bookmarked:

http://blog.drisgill.com/

http://www.heathersolomon.com/blog/

Answer 5

Click on site actions (top left corner of screen) Go to : Site settings - Look and feel - site theme Change the selected color for the "followed Hyperlink" to white (color code is #F8F8F8) Click apply.

Answer 6

I used the following code and it worked:

<img src="image.png" alt="Trust Pilot" border="0px" style="border:none!important; outline:none!important;">

The border is created from the outline attribute just make sure you have it as none. I hope this will help someone else