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>
Thanks for providing the code. Coding is indeed fun, but it's intimidating for WYSIWYG users and challenging to standardize (black border, grey, 1px, 2px, etc) when many hands share content creation/updating responsibilities.
I'm still bemused as to why there's not a standard Image Option for adding a border within the rich text editor. Particularly with screenshots, or a series of screenshots, borders can be an important visual clue for students.
Until Instructure adds a selectable image-border option, I will continue to suggest that instructors consider using the Insert menu to add a horizontal line above and below each image for "clarity without coding."
If there's an appropriate open Feature/Theme where my comment might get more traction, please direct me in that direction.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
