Add a Border to Sections on Squarespace
If you’ve ever wanted to add a clean border or stylish divider between sections on your Squarespace website, there’s good news: you no longer need custom CSS to do it.
Squarespace now includes built-in section divider tools that let you create borders, waves, curves, and other visual separators directly inside the editor. Whether you want a subtle line between sections or a more creative design element, you can do it all using Squarespace’s native styling options.
In this guide, you’ll learn exactly how to add section borders in Squarespace, customize divider styles, and create a more polished website design, all without touching code.
Why Add Borders Between Sections in Squarespace?
Section borders and dividers help:
Create clearer separation between content areas
Improve visual hierarchy
Make long pages easier to scan
Add a more professional, custom-designed look
Introduce subtle branding elements into your layout
The best part is that Squarespace’s built-in divider settings make the process incredibly simple.
Want a framework for designing the perfect homepage?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
How to Add a Border to a Section in Squarespace
Step 1: Open the Squarespace Editor
First, log into your Squarespace website and navigate to the page you want to edit.
Click Edit at the top left of the page to open the page editor.
Step 2: Select the Section You Want to Edit
Find the section where you want to add a border or divider.
Hover over the section and click Edit Section.
This opens the section settings panel.
Step 3: Open the Divider Settings
Inside the section settings menu, scroll down until you see Divider.
Squarespace calls these “Dividers” because they include more than just simple borders, you can also create decorative shapes and transitions between sections.
Step 4: Add a Border (Stroke)
Under the Divider settings, look for the Stroke options.
Here you can customize:
Border style - solid or dotted
Thickness - small, medium, large, or custom sizing
Color - choose from your palette or use a custom color
Opacity - make the border subtle or bold
For example, a thin black line with reduced opacity creates a minimal, professional divider between sections.
Step 5: Experiment With Divider Shapes
Squarespace also allows you to create more advanced section dividers.
You can choose from presets like:
Waves
Curves
Angled dividers
Layered transitions
You can even customize:
Wave spacing
Shape size
Alignment
Direction and flipping
One particularly useful feature is that the background color of the section below can “bleed” upward into the divider, creating a seamless visual transition between sections.
Best Practice: Keep Dividers Subtle
While Squarespace gives you a lot of creative freedom, subtle dividers often look the most professional.
A simple thin border usually works better than bright colors or oversized waves — unless your brand style is intentionally bold and playful.
A good starting point is:
Thin solid line
Neutral color (black, grey, or brand accent)
Lower opacity for a softer appearance
This creates separation without distracting from your content.
Final Thoughts
Adding borders and dividers in Squarespace is now much easier thanks to the platform’s built-in design tools. What previously required custom CSS can now be done visually in just a few clicks.
Whether you want a simple line between sections or a more dynamic wave effect, Squarespace’s Divider settings give you plenty of flexibility to customize your site’s appearance without coding.
If you’re looking to create a cleaner, more professional Squarespace website, section dividers are a small design detail that can make a surprisingly big impact.
