How to Add Borders in Squarespace

How to Add Borders Around Shapes in Squarespace: A Step-by-Step Guide

Adding borders around shapes in Squarespace helps elevate your site’s design by creating emphasis, structure, and visual appeal. Whether you’re highlighting call-to-action buttons, framing images, or sectioning content blocks, borders bring clarity and style.

Step 1: Log in and Enter the Squarespace Editor

• Sign in to your Squarespace account.

• Navigate to the website and page where you want to add the border.

• Click Edit to open the page editor.

Step 2: Select the Shape or Content Block

• Identify the shape or block you want to enclose with a border — this could be an image block, button, text box, or a shape in a code block.

• Click on the block or shape to access its settings.

Step 3: Access Design or Style Options

• For native Squarespace shapes and blocks, look for Design, Style, or Advanced settings within the block editor.

• For buttons or images, you’ll often find a border or frame option.

• If no default border option exists, proceed with adding custom CSS.

Step 4: Adding Borders Using Built-in Options

• Buttons: Under style settings, choose a border style, thickness, and colour.

• Images: Select a frame or “Border” option if available and customize its size and colour.

• Text/Sections: Use spacer blocks and background colour options to simulate borders or add padding for contrast.

Step 5: Adding Borders with Custom CSS (Advanced)

• Go to Design > Custom CSS.

• Use CSS code snippets like the following example to add borders around specific elements:

.your-block-class {
  border: 3px solid #000000; /* Thickness, style, colour */
  border-radius: 8px; /* Optional: rounded corners */
  padding: 10px; /* Space between content and border */
}

• Replace .your-block-class with the correct class or ID of your element. Use browser developer tools to identify this.

• Save your CSS edits and preview changes.

Use Cases for Adding Borders in Squarespace

• Highlighting Calls to Action: Frame buttons or signup forms to make them stand out.

• Framing Images and Galleries: Create defined visual areas for images with borders that match branding.

• Enhancing Content Sections: Separate content areas and improve readability with subtle borders.

• Improving Navigation: Add borders around menu items or social media icons for a bold touch.

• Brand Consistency: Reinforce your brand’s colour palette and aesthetic with matching border styles.

Need Help Perfecting Your Website?

Adding borders can be simple or require custom tweaks depending on your Squarespace template and vision. If you want expert guidance to make your digital dreams come true, book a call with one of our Chandra Web Design experts today. Let us transform your online presence with bold solutions tailored just for you.

Elevate your Squarespace site — your perfect border is just a call away!