How do you add a border to an image on the page?

Jump to solution
Beth_Young
Community Contributor

The page background is white and my image background is white. I want to put a border around the image after I insert it into a Page in Canvas. How do I do that? 

2 Solutions
James
Community Champion

 @Beth_Young ,

Depending on what kind of border you want, you can use the HTML editor and apply CSS border attributes within the style= attribute.

You are limited to what you can add, as  @Chris_Hofer  indicated. The list of what can be used is the Canvas HTML Editor Whitelist. There we see that allowed style properties are:

background, border, clear, color, cursor, direction, display, float, font, height, left line-height, list-style,
margin, max-height, max-width, min-height, min-width, overflow overflow-x, overflow-y, padding, position,
right, text-align, table-layout text-decoration, text-indent, top, vertical-align, visibility, white-space, width
z-index, zoom

That means that you cannot do rounded corners or shadows, but it does support a basic border where you can specify the line thickness, style, and color.

View solution in original post

GideonWilliams
Community Champion

I keep this handy bit of html code that I use for all manner of images and frames.

style="border: 1px solid black;"

For a picture

Simply insert it/paste it where you see the start of <img> in a picture (and it then rearranges)

321441_toy.jpg

<p><img alt="" class="image-1 jive-image jive-emoji" height="274" src="/servlet/JiveServlet/downloadImage/321441/toy.jpg" style="border: 1px solid black;" width="274" /></p>

For an iFrame (embed) when using video or web2 tools

Just add the border: 1px solid black; into the style HTML

<p><iframe height="480" src="https://www.youtube.com/embed/tvydxOmK6nw?feature=oembed&amp;rel=0" style="border: 1px solid black; width: 640px; height: 480px;" title="The Ashes Day 5 Highlights | Second Specsavers Ashes Test 2019" width="640"></iframe></p>

View solution in original post