cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

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

Jump to solution

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? 

1 Solution

Accepted Solutions
Highlighted
Navigator

Beth.Young@ucf.edu,

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 chofer@morainepark.edu 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

4 Replies
Highlighted
Community Coach
Community Coach

Hi Beth.Young@ucf.edu...

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

Highlighted
Navigator

Beth.Young@ucf.edu,

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 chofer@morainepark.edu 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

Highlighted
Community Advocate
Community Advocate

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>
Highlighted
Community Member

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

Top Kudoed Authors
Labels