EverWeb Widgetbox

Image Triple Border

Multiple Borders

This widget allows up to three borders to be added to an image using CSS. The number can be reduced to two or one by setting the appropriate border to zero.

Triple Image Border
CSS image triple border effect

Stony Beach

Atlantic Ocean

Image Triple Border
triple image border widget

Drag the widget onto the page, choose the image and enter alt text for SEO.

Drag the widget height higher than required and then set the width using a drag handle or the Metrics inspector. Now adjust the height.


Select the various border widths and colors.

The outer border needs to be the widest and the inner the narrowest.

Note from the example widget settings shown to the right that the narrow outer border is created by having the middle border width 2px less than the outer one.

Experiment with different widths to create the required balance between all three borders.

Any border can be set to zero if it is not required.

The image captions are in a text box dropped on top using the Google Headings widget so that a non web safe font can be used.

Get The Widget