Image Borders
Code Snippet Library
Basic Borders
This page provides information for adding and styling image borders.
If the border style is in the <img> tag, it will outline the image.
If the border style is in the <figure> tag, it will outline the image and the caption.
Basic Border Around Image Code
<figure><img style="border: 3px solid #009CDE;" src="Image Source URL" alt="descriptive text" />
<figcaption>Image Caption</figcaption>
</figure>
Note: Adjust the border thickness by changing the size (2px, 3px, etc.) and color (from #009CDE to another color hex code).
Basic Border Around Image and Caption Code
<figure style="border: 3px solid #009CDE;""><img src="Image Source URL" alt="descriptive text" />
<figcaption>Image Caption</figcaption>
</figure>
Note: Adjust the border thickness by changing the size (2px, 3px, etc.) and color (from #009CDE to another color hex code).
Border Bars
The following single border examples don't include captions. Please refer to the Image Caption page for information on adding and styling captions.
Image With Flush Bottom Border
Image With Flush Bottom Border Code
<figure><img style="border-bottom: #009CDE 15px solid; width: 60%;" alt="concise image description" src="image file link"/></figure>
Note: Adjust the border by changing the location (from border-bottom to border-top, border-left, or border-right), size (from 15px to 10px for example), and color (#009CDE in this example).
Image With Extended Border Bar Right
A single extended border on an image may be used to create visual interest and balance on a page. This example is for an image that is aligned right. See the Image Size, Spacing, and Placement page for more information.
Image With Extended Border Bar Right Code
<img style="border-right: #009CDE 15px solid; padding: 1.5em 0;" src="Image Source Link" alt="concise image description" />
Modifications
Adjust the border by changing the location (from border-right to border-top, border-left, or border-bottom), size (from 15px to 10px for example), length of extension (from 1.5em to 2em for example) style (from solid to double, dashed, etc.), and color (from #009CDE to another color)
This extended border is achieved through padding settings. The padding setting used in this example (padding: 1.5em 0;) specifies two measurements (number and unit) separated by a single space, to represent top/bottom and left/right padding. Moving the location of the extended border to the top or bottom will require moving the 0 to the first position in the padding setting (padding: 0 1.5em;). To create a single border that extends different distances above and below the image, specify four measurements separated by single spaces (padding: 1.5em 0 3em 0;), to represent top, right, bottom, and left respectively.
Styled Side Borders Template
This style template was developed for a course that uses a specific width and borders for images throughout the course. This was designed to provide a template that will allow instructors to update the page with their own photo while matching those width and border settings. This may serve as a starting point for courses with developments/revisions that involve a lot of collaboration. To function properly, be sure to provide contributors with the steps included with the code.
Styled Side Borders Template Code
<figure>
<div style="border-left: 26px solid #004681; border-right: 15px solid #e8751c; max-width: 354px; display: inline-block;"><img src="Image Source URL" alt="descriptive text" /></div>
<figcaption>Image Caption</figcaption>
Note: The border sizes, styles, and colors can be changed. See the Color Codes and Information page for color ideas.
- Select the placeholder image.
- Select Insert and then choose Image.
- Select the photo from Course Images or upload an image.
- Resize the image by dragging a corner to expand it beyond the borders. (Upon release, it should snap back to fill the preset max width and automatically add width and height measurements to the code.)
- Save.