How to Add Borders in Squarespace 7.1 Using Custom CSS

Jun 29

Borders are a small detail that can make a world of difference in web design today. They define space, direct the reader's eye, and give order to layouts. Though you can do a lot in Squarespace 7.1 with visual controls, this modern version of the platform does not have native settings for borders around everything. Luckily, with a little CSS, you can add clean-looking, responsive borders to pretty much any part of your site, from your overall layout to sections, blocks, and images.

This guide takes you through practical, professional, and scalable methods to add borders in your entire Squarespace 7.1 website — perfect for creatives, developers, and entrepreneurs looking for a professional finish.

Why Use Borders in Web Design?

Well-designed borders can:

Establish content hierarchy
Enhance readability and structure
Emphasize important sections or calls-to-action
Visually separate content blocks or layouts
Create modern, card-style components

Used wisely, borders can add both aesthetic appeal and user experience value.

Where to Add the Code

To apply custom borders in Squarespace:

Go to your Squarespace dashboard
Navigate to Pages → Custom code → Custom CSS
Paste any of the snippets below and adjust as needed
Click Save to apply changes

All examples below are tested with Squarespace 7.1.

1. Add a Border Around the Entire Website

This snippet frames your website layout, ideal for boxed designs or minimalist themes:


/* Full site layout border */
body {
  border: 6px solid #222;     /* Border color and thickness */
  box-sizing: border-box;
  border-radius: 12px;
}

Tip: Adjust margin for spacing, border-radius for rounded corners, and border-color to match your brand palette.

2. Add Borders to Specific Sections

Every Squarespace section has a unique ID, which you can use to target and style borders precisely.

How to Find Section IDs:

Right-click on a section in your browser
Click Inspect
Look for the section’s id (e.g., #block-yui_3_17_2_1_1234567890_98765)

Example CSS:


/* Apply border to a specific section */
#YOUR BLOCK ID{
  border: 2px dashed #0077cc;
  border-radius: 10px;
}

3. Apply Borders to All Sections Automatically

This global approach adds a consistent border to every content section across your site:


/* Global section borders */
section[data-section-id] {
  border: 2px solid #dddddd;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

Optional Hover Effect:


section[data-section-id]:hover {
  border-color: #555;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
}

Ideal for blogs, service layouts, and landing pages with multiple stacked sections.

4. Add Borders to Image Blocks

To visually separate image elements or give them a “frame” feel:


/* Image block borders */
.sqs-image-content img {
  border: 3px solid #ccc;
  border-radius: 12px;
}

Make this responsive for mobile devices:


@media screen and (max-width: 767px) {
  .sqs-image-content img {
    border-width: 2px;
    border-radius: 6px;
  }
}

5. Card-Style Borders for Content Blocks

This layout is perfect for blog previews, product cards, testimonial grids, or pricing plans.


/* Card layout with borders and shadows */
.summary-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s ease-in-out;
}
.summary-item:hover {
  border-color: #888;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

Mobile-First Adjustments

Optimize border display for smaller screens:


@media screen and (max-width: 600px) {
  body {
    margin: 10px;
    border-width: 2px;
  }
  section[data-section-id] {
    padding: 16px;
    border-radius: 6px;
  }
  .summary-item {
    padding: 14px;
    border-radius: 6px;
  }
}

Common Mistakes & Troubleshooting

  
        Issue
        Solution
      
        Border not visible
        Ensure the margin is set correctly on the body
      
        Wrong section targeted
        Double-check the correct section ID
      
        Layout breaks on mobile
        Use media queries to scale padding/margin
      
        Border overlaps with background
        Add inner padding or adjust the z-index

Conclusion

Borders are a subtle yet impactful enhancement to any Squarespace 7.1 website. They provide clear visual boundaries, improve UX, and add modern design sophistication. Whether you're framing the entire site or highlighting key content blocks, these CSS techniques give you professional-level control over your layout.

And best of all, no third-party tools or integrations required.

Frequently Asked Questions (FAQ)

1. Can I draw borders around some but not all sections?

Yes. You also have the option to link individual sections themselves by their section ID. Simply use dev tools to check the part where the block is; you will also see an ID (e.g., #YOUR BLOCK ID), then apply CSS for only that block.

2. How can I figure out what the appropriate section IDs would be to plug into my CSS?

Right-click on the section in your browser → choose Inspect → look for the <section> tag and copy the id (usually starts with block-yui_...). This is the selector you’ll use in your CSS.

3. How will adding borders impact my site’s mobile-friendliness?

Not if you use media queries. The guide also has border-width and border-radius scaling for mobile (@media screen and (max-width: 767px)) to keep that border-width-radius clean and responsive.

4. Is it possible to add a hover effect on borders (color change or shadow)?

Absolutely. You can use the:hover pseudo-class on sections or blocks to change border colors or add box shadows, or even emit interactive effects.

5. Will this work with all Squarespace 7.1 templates?
Yes. All templates in Squarespace 7.1 use a shared structural system, so these CSS snippets work across all of them. Just make sure to use the correct selectors and IDs.

6. Why aren’t my borders showing up after saving the CSS?
Common reasons:

You may have targeted the wrong selector (double-check IDs).
Border color might match the background.
Outer padding or margin may be overriding it. Try adjusting box-sizing or adding !important.

7. Can I add a border only around image blocks, not the entire image section?
Yes. Target .sqs-image-content img in your CSS to style just the image itself — not the entire image section or container.

8. Is it possible to add rounded borders with this method?
Yes! Use the border-radius property to control how rounded your corners appear. You can customize values per element or adjust them for mobile via media queries.

9. Will adding borders slow down my site or require extra plugins?
No. All borders are applied using lightweight CSS, no plugins or extra resources required. It’s a clean and efficient way to enhance your site visually.