How to Add Borders Around Images in Squarespace

Borders may seem like a subtle design feature, though they have the power to drastically alter how images look on your Squarespace 7.1 site. A nice border can make your images pop, give you some separation between the background and your visuals, and give some polish to your overall design. Whether you’re displaying products, crafting a portfolio page, or looking to add some stylistic edge to your blog posts, borders can be an easy way to establish a sense of direction and consistency for your viewer.

The best part? If you can read, you can learn to write code. You don’t have to be a code expert. Squarespace offers very basic border styling, and just a bit of CSS will open up a world of different border styles. In this guide, we’ll cover no-code and advanced methods so you can create borders that truly suit the look and feel of your site.

Why Use Image Borders?

Borders are more than merely visual ornamentation. When done right, they:

• Draw attention to specific visuals

• Contrast Back Against the Sections

• Improve layout structure and readability

• Improve your site's overall branding style

Method 1: Squarespace’s Own Styling Options (No Code)

If you are using Image Blocks, Squarespace 7.1 templates may offer visual styling options:

Steps:

1. Go to Design → Site Styles

2. Scroll down to Image Block or Image Styles.

3. Adjust:

• Padding or spacing around images

• Shadow or frame (most templates provide “framed” styles).

• Corner radius (for rounded borders)

Some templates lack controls specific to the border. For total design control, try the CSS method below.

Method 2: Add Custom CSS for Precise Border Styling

To apply a custom border to your images, follow these steps:

Step 1: Go to

Pages → Custom code → Custom CSS

Step 2: Add One of the Following Snippets:

Apply a Border to All Images

Copy

Copied!

img {
  border: 3px solid #000;
  border-radius: 8px;
  box-sizing: border-box;
}
  

✔ Best for simple, universal styling across your website.

Apply Border to a Specific Image Only

1. Edit the image block

2. Click Advanced

3. Add a custom class name, e.g. #block-yui_3_17_2_1_1686920023164_12941

4. Then in Custom CSS, paste:

Copy

Copied!

#block-yui_3_17_2_1_1686920023164_12941 img {
  border: 2px solid #333;
  border-radius: 5px;
}
  

Use this if you want different borders for different images.

Bonus: Creative Border Styles You Can Try

Style	CSS Code Example
Dashed Border	border: 2px dashed #666;
Double Border	border: 4px double #000;
Shadow + Border	box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000;
Rounded Corners	border-radius: 12px;
Gradient Border	Use pseudo-elements or container tricks

Responsive Design Tips

• Always use box-sizing: border-box; to maintain proper alignment

• Check how borders look on mobile, tablet, and desktop

• Adjust spacing and padding to avoid squishing or overflow

Final Thoughts

Adding borders around your images in Squarespace 7.1 might seem like a tiny design detail, but the payoff is huge. It is one of those small design changes that takes your site the extra mile and makes your images captivating while keeping your layout simple and professional.

If you are more like me and want simple, fast results, use Squarespace’s building plugins. But, if you prefer full creative control, then it is time to learn some CSS to create from single lines to dots and dashes, Double borders, and even some gradients. 

Remember: design is in the detail. By considering a few boundaries, you are not just making images look pretty; you are boosting readability, brand awareness, and overall user experience.

---

Frequently Asked Questions

1) Can I add borders to images in Squarespace without using code?

Yes. In Squarespace 7.1, some templates include built-in image styling under Design → Site Styles, where you can adjust padding, frames, shadows, and corner radius. However, for full border customization, CSS is the better option.

2) How do I add a border to all images on my Squarespace site?

Go to Pages → Custom code → Custom CSS and paste:

Copy

Copied!

img {
  border: 3px solid #000;
  border-radius: 8px;
  box-sizing: border-box;
}
  

This applies a clean, universal border to every image across your website.

3) How can I add a border to only one specific image?

Edit the image block → Advanced → Add a custom class or ID. Then, target that ID/class in your CSS. Example:

Copy

Copied!

#block-yui_3_17_2_1_1686920023164_12941 img {
  border: 2px solid #333;
  border-radius: 5px;
}
  

This lets you style images individually.

4) What are some creative border styles I can try?

You can experiment with:

• Dashed border: border: 2px dashed #666;

• Double border: border: 4px double #000;

• Shadow + layered border: box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000;

• Rounded corners: border-radius: 12px;

• Gradient borders: Achieved with pseudo-elements or wrapper containers.

5) Will image borders affect mobile responsiveness?

Borders won’t break responsiveness if you use box-sizing: border-box, and test across devices. Always check mobile previews to ensure borders don’t crowd images or create spacing issues