How to Add a Border to Images in Squarespace Without CSS

Have you ever wanted to add a border to an image on your website to make it stand out? While this could typically involve CSS, today I’m going to show you a simple workaround that requires no coding skills. Let’s get those images looking polished and professional!

Watch the video

Check out the YouTube video below. 👇🏼

Why Add Borders to Images?

Borders are a great way to:

• Highlight important visuals: Draw attention to featured images or product shots.

• Create consistency: Match image borders with your site’s branding elements, like underlines or accents.

• Improve aesthetics: Add a clean, defined look to your visuals.

Step-by-Step Guide to Adding Borders Without CSS

Step 1: Add a Shape Block

1. Open your Squarespace editor and navigate to the page with the image you want to modify.

2. Click Edit, then Add Block, and choose a Shape Block.

3. Drag the shape block over the image and resize it to match the image’s dimensions perfectly.

Step 2: Style the Shape Block

1. Click the Pencil Icon on the shape block to open its settings.

2. Adjust the color of the shape block to match the desired border color.

3. Add a stroke to the shape block for the border:

   • Scroll down to the Stroke Settings.

   • Choose the stroke size (e.g., small, medium, or large) depending on your preferred border thickness.

4. Save your changes.

Step 3: Layer the Shape Block Behind the Image

1. Select the shape block and move it backward using the Move Backward button.

Step 4: Adjust for Mobile View

You will want to switch over to Mobile View and go through the process of layering the shape block over the image block and then moving it backward.

1. Switch to Mobile View in the Squarespace editor.

2. Repeat the process of resizing and layering the shape block to fit the image block on mobile.

3. Check the alignment and adjust other blocks if necessary to ensure everything looks polished.

Pro Tips for Adding Borders

1. Consistency is Key: Match the border thickness and color with other design elements on your site for a cohesive look.

2. Test Across Devices: Always preview your site on both desktop and mobile to ensure the border looks great everywhere.

3. Use Borders Strategically: Apply borders sparingly to highlight only the most important images.

Wrapping Up

Adding a border to images in Squarespace without using CSS is a straightforward process that can elevate your site’s design. With just a shape block and some simple adjustments, you can create professional-looking borders in minutes.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.