Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

How to put borders around your images

DrNufer
Community Coach
Community Coach
0 0 89

CSS borders are really fun and a great way to easily enhance your Canvas pictures. The reality is that you can put a border around anything - a paragraph, a <div>, a picture or video, a heading, and so on.  But we'll focus on pictures.  CSS borders allow you to specify the style (e.g. a straight line, dotted, dashed, etc.), a color, and the width of thickness of the line. 

Feel free to grab my code to explore how you can put borders around images.

https://canvas.instructure.com/courses/2560052/pages/css-image-borders

Copy the code you'd like, then paste it into your Canvas page's HTML editor.  Then go back and modify the properties.  What is the difference between a 1 pixel width versus 5, 10, or 50 pixel widths?  What kinds of colors best compliment your image?

Once you get the hang of it, try putting a border around other things, like paragraphs of text.  You can even put borders on only some sides.  Here is an example of a border on the left of a paragraph.

This is a left border, 5 pixels, solid, and color #E3555E with a background color #D1F7FA.

Here is the code for that if you'd like to try it:

<p style="border-left: 5px solid #E3555E; padding: 20px; background-color: #d1f7fa; color: #434343;">This is a left border, 5 pixels, solid, and color #E3555E with a background color #D1F7FA.</p>