How to remove borders from image hyperlinks in classic SharePoint

In this example we will show you how to quickly and easily remove the blue borders that appear around images that have hyperlinks

December 20, 2023

SharePoint

(This post was written using a SharePoint 2010 environment)

In this example we will show you how to quickly and easily remove the blue borders that appear around images that have hyperlinks.

The scenario

If you have been around SharePoint for some time, as a site owner or administrator you will have undoubtedly come across “buttons” or “icons” that are just images that link to content elsewhere.

I don’t personally think there is anything wrong with this design approach, but if you have encountered these buttons, you will also have come across the annoying, blue border that appears around the image once a hyperlink is created.

*An example of a button added to a SharePoint page with a blue hyperlink border.*

This post will walk through the steps involved in removing this blue border from an image added to a classic SharePoint page:

Navigate to a page in SharePoint where there is an image button
Press Site Actions > Edit Page
Click in the zone where your image button is > under Editing Tools > Format Text > HTML > press Edit HTML Source

*Press Edit HTML Source from the Editing Tools menu in the ribbon.*

A new window will pop-up, this is the HTML for the page you are editing. Here is where you will update the HTML source to remove the blue border.

Depending on how much there is on your page there could be lots of HTML to go through to find your image. If this is the case for you I would suggest using a source code editor such as Notepad++ to make life easier. For the purposes of this example I will show you how to update the HTML using a source code editor:

With the HTML pop-up window open, click inside the window and press CTRL+A to select, then > CTRL+C to copy all the HTML
Open your code editor > paste the HTML into a new window
Press CTRL+F and begin typing the name or part of the address of your image > press enter until you find your image in the HTML

*Using the find (CTRL+F) function in Notepad++ to highlight your image in the HTML of you page.*

Update the line of code where your image is within the style section, adding border: 0px before the closing quotation marks

Now, press CTRL+A > CTRL+C to select and copy all the HTML from the code editor
Back to SharePoint, in the same pop-up window that was open previously > press CTRL+A, CTRL+C
You will notice a yellow warning message appear saying “the HTML source you entered might of been modified”, but that’s OK as that’s exactly what we’ve done!
Now, the blue box will of disappeared around your image

After copying & pasting your HTML from the code editor, you will receive this message in SharePoint.

Save your changes and publish your page, no more blue border!