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

[Beth_Young]

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? 

[James · Accepted solution]

 @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.

[Chris_Hofer]

Hi  @Beth_Young ...

It sounds like you will need to do a bit of graphics editing offline, and then you can then upload your image back into Canvas.  Canvas does not really have tools available for you to add things like borders, shadows, or other graphic elements to your images to get them a bit of "flair".

[James · Accepted solution]

 @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.

[GideonWilliams · Accepted solution]

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)

<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>

[aroyal9]

Just had to tell you this.  I had bookmarked this page in my browser on a different computer and somehow lost track of it (not realizing at the time that I could bookmark this article in my Canvas Community profile).  I took my best guess at the search string to get me here, and I've never been so happy to see the picture of that silly plastic spider--that's how I knew I found what I was looking for!  Thanks for making a memorable post.

Gwinn

[GideonWilliams]

You and me both - except I often have to do it for the posts that I have written!

[Beth_Young]

Thank you, everyone! I used the code from Gideon and it did the trick! I appreciate all the advice.