Image Borders

Add borders and effects to images on your site.

Images With Effects and Captions

These effects will not work on images with captions.  They do work with our image overlays.  The image overlay however will not display the image with with these effects because the image overlay has its own default style that will be applied.


Image Border

 ImageBorders.jpg

This effect adds a simple 1-pixel border to your images.

  1. Select the image you want to add a border to.
  2. From the Style drop-down menu, select the Image Border option.

Image Polaroid

ImageBorders.jpg 

This effect adds a double border around the image with a subtle drop shadow.

  1. Select the image you want to add this effect to.
  2. From the Style drop-down menu, select the Image Polaroid option.

Image Shadow

ImageBorders.jpg 

This effect adds a subtle drop shadow to an image. 

  1. Select the image you want to add this effect to.
  2. From the Style drop-down menu, select the Image Shadow option.

 

 

The following image styles involves editing the page HTML.  As such, a basic understanding of HTML is required.

Image Circle

This effect will round out the right and left sides of an image.  If you apply this effect to a square image, the effect will produce a circle. 

ImageBorders.jpg

 

original image     original image

Above, you can compare the original square image of Dr. Roper and a copy of it with the circle effect applied to it. 

To add this effect (requires editing HTML):

  1. While editing a page with an image on it, click the HTML button on the visual editor.
  2. In the source code window that appears, find the <img> tag of the image that you want to add this effect to.
  3. Add a class called "img-circle" (i.e. <img class="img-circle" src="resolveuid/2a7bc79d4aea" />).  
  4. Please note that most images will already have a class associated with them that defines the alignment of the image (e.g. image-inline, image-right, image-left). Simply add img-circle as an additional class  (i.e. <img class="image-right img-circle" src="resolveuid/2a7bc79d4aea" />).
  5. Click OK, and then Save the page.

 


Image Rounded

ImageBorders.jpg 

This effect slightly rounds out the corners of an image.

To add this effect (requires editing HTML):

  1. While editing a page with an image on it, click the HTML button on the visual editor.
  2. In the source code window that appears, find the <img> tag of the image that you want to add this effect to.
  3. Add a class called "img-rounded" (i.e. <img class="img-rounded" src="resolveuid/2a7bc79d4aea" />).  
  4. Please note that most images will already have a class associated with them that defines the alignment of the image (e.g. image-inline, image-right, image-left). Simply add img-rounded as an additional class (i.e. <img class="image-right img-rounded" src="resolveuid/2a7bc79d4aea" />).
  5. Click OK, and then Save the page.

Combining Effects

The Image Border effect can be added to both the Image Circle and Image Rounded effects.  

original image

 

ImageBorders.jpg