How to create a vertical line in Squarespace

layout

May 13

Squarespace doesn’t have a vertical line option—but thanks to a little CSS, you can add one to any site. 🙌

In this tutorial, I’ll show you three super simple ways to add vertical lines using custom code. Whether you're working with shape blocks, list sections, or even classic editor pages like blogs or events, these techniques will help you create clean vertical dividers that look great on desktop and mobile. I’ll also walk you through how to hide them on smaller screens and grab block IDs with a free Chrome extension.

Watch the video below to see each method step-by-step, then scroll down for the exact code snippets and design tips you’ll need to make it happen.

1. Shape Block Border
Use a transparent shape block and add a border-left style in CSS to create a sleek vertical line. For best results, turn off "Fill Screen" and remove any row or column gaps in your section settings so the line can stretch from the very top to the bottom of the section. It’s a simple and flexible method, perfect for highlighting a split layout or adding a subtle visual guide.

// vertical line via shape block from insidethesquare.co
@media screen and (min-width:641px){
.sqs-shape{
  border-left:1px solid #333
}
}

2. List or People Sections
Style each item with a border-left to create vertical dividers between list entries. To keep things clean, you’ll hide the border on the first list item so the divider only appears between items, not along the edges. This technique is great for grids, team sections, or service lists.

// vertical line between list items from insidethesquare.co
@media screen and (min-width:641px){
.list-item{
  border-left:1px solid #333
}
.list-item:first-of-type{
  border-color:transparent
}
}

3. Classic Editor (Blog, Events, Products)
Since shape blocks aren’t available in classic editor pages, you’ll use the block ID of a specific content area and apply a vertical border just to that element. Grab the ID using a free Chrome extension (linked below the video) and target that block directly in your CSS, perfect for blog layouts or event pages where full design control is limited.

// block id technique from insidethesquare.co
@media screen and (min-width:641px){
#block-12345{
  border-right:1px solid #333
}
}

💡 All three methods above include a media query so the vertical line will only appear on desktop, keeping your mobile layout clean and clutter-free.

🔗 Here is a link to the free chrome extension for grabbing those block IDs: insidethesquare.co/chromeext

layoutpage