SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'd like to edit a page's html source to remove boxes around images with links.

enter image description here

In CSS you can simply assign text-decoration:none to the element.

I'd like that flexibilty within the SharePoint HTML Source Editor

share|improve this question

The short answer: When working with rich text editors that allow you to modify the HTML source, yes.

The longer answer: It can be tricky. SharePoint has a lot of CSS and JavaScript involved to make it look the way it does. Sometimes you'll find that you'll apply a css style and it simply does not seem to work as expected. For this try the !important modifier to the style. E.g. - <div style='border:1px solid black!important; color: green!important;'></div>

In other cases you'll find that you get a message saying that SharePoint has modified the source that you explicitly entered and end up removing some of your changes. Sometimes this is due to malformed HTML/CSS code but sometimes it can just be SharePoint trying to ruin your day. The way I have worked around this is by embedding the source another way. Options you have include a Page Viewer Web Part, an iframe, or a Content Editor Web Part with linked content where the linked content could be an HTML or CSS file if you would like.

Needless to say what you are looking to do looks pretty trivial to me and you shouldn't have much of an issue trying to update the CSS inside rich text editor elements that allow for HTML modification, but should you run into issues hopefully what I've outlined above helps you out.

share|improve this answer
Thanks Todders. Can I add CSS directly inside the HTML Editor? How would that look? – Growler Jul 11 '13 at 18:47
Just like you would with any other HTML editor. You can either add the CSS between style tags and specify IDs and classes for your HTML elements, or add the CSS inline within the style attribute of the element you want to style. – SpartanDonut Jul 11 '13 at 18:50
That doesn't work. I added <style type="text/css"> a img {border:none;}</style> to remove borders from images but it didn't work – Growler Jul 11 '13 at 19:27
Did you try <style type="text/css"> a img {border:none!important;}</style> like I recommended? maybe give your images a specific class and apply it to that class instead? – SpartanDonut Jul 11 '13 at 19:39
Yes I did that. – Growler Jul 11 '13 at 19:52

Check the element where the borders are applied, you have to apply your style at that selector. Please add screenshots taking from the dev tool bars for the borders.

share|improve this answer

The easiest way to accomplish this is to edit the HTML source, find the offending img elements, and add a style attribute with "border:0px;"

<a href="..."><img style="border:0px;" src="..." /></a>

The inline style will trump the CSS that adds the borders.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.