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.
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>
Sean Nufer works collaboratively with the Instructional Design team and faculty to ensure utilization of state-of-the-art resources in the classroom.
He knows how to make gifs, but they're not very good.
