How to Add a Border in Squarespace
To add a border in Squarespace, hover the section and click Edit Section, then scroll to the bottom of the settings panel where you will find Border. Pick a style, then set the thickness, color and inset to match your design.
Adding a border to a section
Hover the section you want to frame and click Edit Section.
Scroll to the bottom of the settings panel. Border is the last option, which is why people miss it.
You'll get a set of border styles to choose from, then controls for thickness, color and how far the border sits inside the section edge.
The inset control is the one worth playing with. A border pulled slightly inside the section edge reads as deliberate and editorial. A border flush to the edge tends to look like a container that didn't get styled.
Choosing thickness and color
Thin borders look intentional. Thick borders make a statement and date quickly.
One to two pixels is right for most sites. It reads as a considered detail rather than a box.
For color, a border rarely wants to be pure black. A very dark tone of your brand color, or a light neutral at low contrast, sits into the design instead of fighting it. Borders are structure, not decoration, so they should be quiet.
Pull your color from your site palette rather than picking a one-off, so it still matches if you change your branding later.
Borders on images and buttons
The section border setting only covers sections. For anything else, you need a line of CSS.
For images, target the image block and set a border with the width, style and color you want. For buttons, an outlined style, meaning a transparent background with a border, is a common secondary button treatment and takes a couple of lines.
Both go in Website Tools under Custom CSS, which needs a plan with code access. If you're adding a handful of these, it's worth doing it in one pass rather than piecemeal, and it's a quick code support job if you'd rather not.
When a border actually helps
Borders work when they're doing a job. Separating a section that would otherwise blend into the one above it. Framing a testimonial or pricing card so it reads as a distinct unit. Giving a light-on-light layout some structure.
They don't work as general decoration. If every section has a border, none of them mean anything and the page starts to look like a spreadsheet.
Often the better answer is spacing. A section that feels like it needs separating usually just needs more padding above and below it, and whitespace tends to look more expensive than lines.
Checking it on mobile
Borders behave differently on narrow screens. A border with a generous inset on desktop can end up almost touching your text on a phone, since the section padding shrinks but the border doesn't scale with it.
Preview on mobile and check that your content isn't crowding the frame. If it is, either reduce the inset or increase the section's mobile padding.
Frequently asked questions
Where is the border option in Squarespace?
Hover a section, click Edit Section, and scroll to the very bottom of the settings panel. Border is the last option, which is why it's easy to miss.
Can I add a border to an image or a button?
Not from the built-in settings, which only cover sections. Images and buttons need a short CSS rule in Custom CSS.
Can I add a border to just one side?
The built-in control applies to all sides. A single-sided border, like a top rule between sections, is a one-line CSS job.
Do borders affect mobile layout?
They can crowd your content, since section padding shrinks on mobile but the border inset doesn't. Always preview on a phone.
Want the details on your site to look deliberate rather than default? Book a free call.
I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.
