Skip Ribbon Commands
Skip to main content
Blog > Posts > Get Rid of the "Ring" Around A Hyperlinked Image In A SharePoint 2010 CEWP
April 26
Get Rid of the "Ring" Around A Hyperlinked Image In A SharePoint 2010 CEWP

​This tip is something I use DAILY! This is how I remove the hyperlink border around an image in a CEWP in SharePoint 2010.

So here you have a nice image, maybe even with a cool transparency. You place the image into a SharePoint Content Editor Web Part. Looks good, cool.

Then you say, "Hey, this should link back to our public website". So you select the image and hit the "Insert" tab, then "Link". You hit OK and BANG. BIG. UGLY. HYPERLINK BORDER.

You say, "OK, I'll just remove it in the 'Picture Tools' tab". Change the "Image Styles" to "No Border". Nothing happens. No options in the "Link Tools" to change this. You go into the "Edit HTML source" button and set "border=0px". SharePoint "fixes" your code for you, the border remains. AARGH!

The solution is pretty close to what you tried last, but it's all in HOW you write it. The correct way to remove the border is by clicking in the CEWP, hit the "Format Text" tab, and hit "HTML" > "Edit HTML Source". Then find the IMG tag of the image, NOT the <a href> hyperlink tag. Usually there is a style of {style="margin: 5px"} set in there. Just add a ";" after the margin code, then add "border: 0px" after it and before the ending quotation mark . So your code should be:

<img src="/SiteAssets/example.jpg" alt="" style="margin: 5px; border: 0px"/>

Save and the ugly border is GONE! Enjoy your visual purity...  

Comments

There are no comments for this post.


Designed and Implemented by
Vermont SharePoint consultants
a Gold Certified Microsoft SharePoint Consulting Firm