Add a Border Around an Image in Squarespace (Step-by-Step CSS Guide)
An image can sometimes blend into the background of a page, especially when the photo and the surrounding section share similar colors. A thin frame can give it a clearer edge without changing the image itself.
To add a border around an image in Squarespace, you can target its Image Block ID in the Custom CSS panel and apply an outline. This lets you frame one selected block and adjust the color, thickness, and spacing to suit your design.
In this guide, you’ll learn how to add the frame, customize it, and create an optional hover effect. No JavaScript or paid styling plugin is needed.
Before You Start: What This Code Actually Frames
The CSS below applies an outline to the entire Image Block. Depending on your layout, that block may contain padding or a caption as well as the photograph.
Although the result looks like a border, outline and border are different CSS properties. An outline sits outside an element’s border and does not take up layout space. That makes it useful for adding a frame without pushing surrounding content away, but it can overlap nearby elements if the spacing is tight. MDN’s outline reference
Use this method for a standard Image Block. It is not a general selector for every gallery image, product thumbnail, or portfolio collection image. A regular Image Block used inside a blog post or project page can still be targeted—the type of element matters more than the page’s name.
Step 1: Find Your Image Block ID
Open the page containing the image you want to frame. Use the Squarespace ID Finder extension to identify and copy that image’s Block ID.
Make sure you select the image block, rather than the surrounding section. The selector you’ll paste into the CSS should begin with #block-.
You only need the ID for the block you want to change. This keeps the styling focused on that image instead of applying a frame throughout your website.
Step 2: Add the CSS to Squarespace
Open your site’s Custom CSS panel. Add the following code after your existing CSS, outside any other rule, then save your changes. Squarespace explains the editor and saving process in its Custom CSS guide.
#block-903016c796e76d66c3a1 {
outline: solid 2px #59c4c0;
background-color: #fff;
}Replace #block-903016c796e76d66c3a1 with your own Image Block ID. The ID shown here is an example, not a value that automatically finds your image.
The code adds a solid, 2-pixel teal outline and a white background to the selected block. The background may only be visible around the photo where the block has empty space, padding, or transparent content.
Open the page outside the editor to check the result before adding more styling.
Step 3: Customize Your Squarespace Image Border
Start with the thickness and color. These two details often make the biggest difference to how well the frame fits your website.
Change the Thickness
In outline: solid 2px #59c4c0;, replace 2px with your preferred width. Try 1px for a fine edge or 4px for a more noticeable frame.
A stronger frame can suit bold layouts, while a thin line often works better around detailed photography. Review the whole section rather than judging the border in isolation.
Change the Color or Line Style
Replace #59c4c0 with a color from your brand palette. For example, this declaration creates a thin black outline:
outline: solid 1px #000000;You can also replace solid with dashed or dotted. Choose one of these declarations to replace the existing outline line; you don’t need to stack several outline declarations together.
Add Space Inside the Frame
To create a small white margin between the block’s edge and its content, add padding inside the same rule:
#block-903016c796e76d66c3a1 {
outline: solid 2px #59c4c0;
background-color: #fff;
padding: 5px;
}Again, use your own ID. Padding changes the block’s internal spacing and can affect how the image fits, so check desktop and mobile after adding it.
Squarespace’s Fluid Engine Image Blocks also have Fit and Fill settings that influence the space around their content. These settings can help explain why the frame sits tightly against one image but farther away from another. Squarespace’s block layout guide
Round the Outer Frame
For softer corners, you can add this optional declaration inside the block rule:
border-radius: 10px;This rounds the block’s outer shape, but it does not automatically clip the photograph inside it. If the image still has square corners, its inner image container may need separate styling. Check the result before assuming that rounding the block also rounds the photo.
Optional: Show the Frame on Hover
If you want the outline to appear when someone moves their pointer over the block, use this hover-only example instead of the always-visible outline:
#block-yui_3_17_2_1_1592233912191_79164:hover {
outline: solid 2px #59c4c0;
background-color: #fff;
opacity: 0.5;
}Replace the example ID with the same Image Block ID you copied earlier.
This version does two things: it adds the outline on hover and makes the entire block 50% opaque. That includes the photo, outline, background, and any caption inside the block. It does not only fade the frame. MDN’s opacity reference
If you only want the outline to appear, remove opacity: 0.5;. If you keep both the static and hover snippets with the same ID, the outline will already be visible before hovering; the hover rule will mainly add the fading change.
Treat hover as an optional visual detail. It should not be the only way someone can identify an image link or understand important content.
Step 4: Check the Finished Page
Review the image on desktop and on a phone. A frame that feels subtle around a large image can look much heavier around a small one.
Check that the outline has room around it, captions remain readable, and the image is still positioned correctly. If the image opens a link or lightbox, test that interaction too.
You don’t need a frame around every image to make the design consistent. Use the same treatment for images that serve a similar purpose, such as a group of service previews, and leave other visuals unframed when that looks clearer.
Troubleshooting: Why Isn’t My Image Border Showing?
1. The Block ID Doesn’t Match
Copy the ID again using the ID Finder and compare it with your CSS. Keep a single # at the beginning. One missing character is enough to make the selector target nothing.
2. The Frame Is Around More Than the Photograph
That is expected when the block includes extra space or a caption. This snippet styles the block itself. If you want a line directly around the photograph, its inner image or wrapper needs a more specific selector suited to that layout.
3. The Outline Is Cut Off
An outline can extend beyond the block’s edge. A surrounding container that clips overflow may hide part of it. Check the block’s position and surrounding layout before increasing the outline thickness.
4. Another Style Is Taking Priority
Look for existing CSS that targets the same block, especially rules affecting its outline, background, or opacity. Also check that the new snippet sits outside earlier rules and that every opening brace has a closing brace.
Frequently Asked Questions
-
Yes. Targeting its unique Block ID limits the styling to that block. Other images remain unaffected unless you add their IDs or use a broader selector. This is a useful approach for highlighting one photo without changing the rest of your site.
-
Yes. Copy each Image Block ID and separate the selectors with commas before the opening brace. They can then share the same outline and background declarations. Make sure every ID belongs to an image you intend to style, and preview each one because their layouts may differ.
-
This tutorial targets individual standard Image Blocks. Gallery items, product thumbnails, and collection images may need different selectors or built-in design controls. A product photograph uploaded into a regular Image Block can use this method, but that does not mean the same code automatically styles your store grid.
-
The optional snippet applies opacity: 0.5 to the block, so all of its contents fade together. Remove that declaration if you want the photo and caption to stay fully visible while the outline appears. Keep the outline and background declarations in place.
Final Thoughts
A well-chosen image border can create separation and help a photograph feel more connected to the page design. Start with a simple line, match it to your brand, and adjust the spacing until the image feels comfortably framed.
The effect does not need to be bold to be useful. A thin outline around the right image can be enough.
Building or improving a Squarespace website? Book a free call with me to discuss your website, your goals, and how I can help turn your ideas into a professional Squarespace website designed to convert visitors into enquiries.
