Why Add Image Borders?
When importing an image to Canvas, there is no easily built-in way to add borders to images automatically. If you are including screenshots or other images, a border can help be a visual delineation between it and the text. In the image below, the JSTOR database search box is a screenshot, but without a border. A student might interpret this as clickable or searchable, which is not the case.
NO BORDER:
BORDER:
In the below example a border has been added around the screenshot.
Adding Borders in Canvas
Canvas allows you to add borders to an image directly inside Canvas using HTML code. When editing a page with an image, click on HTML Editor in the upper corner.
Inside of the HTML code of the page, look for the <img> tag and add this code inside of it, before the src= section.
style="border: 1px solid lightgray;"
This will tell Canvas to put a border around the image one pixel thick, solid fill (instead of dotted), with a color of light gray. Feel free to use "black" instead of the light gray if so desired. See an example of the code below:
How to Add Borders using a Mac
USING A MAC COMPUTER:
The easiest way to add borders to an image with an Apple Mac is to use Preview. Open an image in Preview using the Open With option in the context menu. This can be accessed by right-clicking on the image in your Finder.
Once the image is open in Preview, click View > Show Markup Toolbar. This can also be opened using the keyboard shortcut shift ⌘ A.
Use the Shapes tool to select a Square shape, then change the color of the square to light gray or black, your preference.
Move the square to the almost outside of your image, then click File > Save. The new saved version of your image will have the same filename, be in the same place in your computer, but now will have a border.
Here is what the above image looks like with a border added using Preview.
Adding Borders using GIMP
USING GIMP
GIMP is a free program on the web for Mac and PCs that allows image manipulation.
If you're using a U-M MiWorkspaces computer, then the free program GIMP is available for download in the Managed Software Center.
The video below will demonstrate how to add a border to an image.