Adding an Outline to Images in Squarespace

Designing a website can be intimidating. Not only do you have to figure out how you want everything to look, but you also have to write the copy, gather the images, and make sure it all works.

That’s a big reason why clients hire me - so they can focus on their business while I make sure their website design reflects the work they’re doing.

One thing I’ve found that many of my clients need is an elegant, timeless design. And while a lot of that can be accomplished with font and image choices, there are some custom code tricks that I like to use to help create that feeling.

One of the most popular is adding an outline to images on a website. It can either be punchy and bold or classic and elegant depending on a few setting options. Today I’ll walk you through the basics so you can customize these for your brand.

Adding a static outline

The first step when adding an outline to an image is to set up the static border.

The simplest way to do this is to add a border to the block using the Block ID

#block-903016c796e76d66c3a1 {
   outline: solid 2px #59c4c0;
   background-color: #fff;
   }

Outline sets what kind of outline you’re using (solid, dashed, etc.), the thickness of the outline, and the color.

Background-color changes the colors between the outline and the image. I usually set this to white (#fff), but you can use the same color as the outline for a thicker bar that goes to the edge of the image.

Adding a hover state

If you want the image outline to change colors when you hover over it, you can use some additional code to do that.

1. Start with the regular outline:

#block-97fcb4b06f245bf6e501  {
   outline: solid 2px #59c4c0;
   background-color: #fff;
   }  

2. Then set the hover state of the image:

#block-97fcb4b06f245bf6e501:hover  {
   outline: solid 2px #59c4c0;
   background-color: #59c4c0;
   }

Other Options

There are also some other CSS changes you can make for an even more custom look.

#block-yui_3_17_2_1_1592233912191_79164:hover  {
   outline: solid 2px #59c4c0;
   background-color: #fff;
   opacity: 0.5;
   }

Opacity controls how “faded” an image appears.

You can also change which state has the background color turned on or change it from one color to another.