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


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.

  • 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

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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