How Do You Add a Vertical Line in Squarespace?

Squarespace has no vertical line block, so a vertical line in Squarespace is made one of four ways: a Shape block in Fluid Engine dragged down to a narrow column (no code), a Line block turned 90 degrees with two lines of CSS, a border on the edge of a column block, or a code block with a styled div when you need exact height and colour. The Shape block is the answer for most 7.1 sites in 2026 because it needs no code and moves with the layout; the CSS routes are for 7.0, for lines between columns, and for lines that have to be a precise one pixel wide. All three are below, with the CSS ready to paste and the two reasons a line disappears on mobile.

What is the easiest way to add a vertical line in Squarespace 7.1?

Use a Shape block. In Fluid Engine (the editor on every 7.1 site created since 2022), a shape can be resized to a single grid column wide and stretched as tall as the section, which is a vertical line by another name.

1. Edit the page, click Add Block, then Shape, and choose the rectangle.
2. Drag the shape’s side handles inward until it is one grid column wide, then drag the top and bottom handles to the height you want.
3. Click the shape, open its settings and set the Fill colour to your line colour. Set the stroke to none.
4. Switch to the mobile view (phone icon) and check it: Fluid Engine keeps a separate mobile layout, so a line that sits between two columns on desktop may need moving or hiding once the columns stack.

One grid column is the narrowest a shape goes without code, which on most layouts is 30 to 40 pixels. If you need a hairline, add this to Website, Website Tools, Custom CSS after finding the block’s ID (right-click the shape, Inspect, and read id="block-…", or use the free Squarespace ID Finder extension). The inner element carries the class sqs-shape on current 7.1 sites; if Inspect shows a different class on yours, use that one:

#block-YOUR-ID .sqs-shape { width: 2px !important; margin: 0 auto; }

How do you turn a Line block into a vertical line?

The built-in Line block draws a horizontal rule. Rotating it is the classic method and still works on both versions. Add a Line block where you want the vertical line, find its block ID, and paste:

#block-YOUR-ID {
  transform: rotate(90deg);
  width: 200px;   /* this becomes the line's height */
  margin: 100px auto;   /* half the width, so the rotated line stays inside its box */
}

Set the colour in Site Styles rather than CSS: on 7.1, open Site Styles, Colors, click the pencil on the section’s colour theme and use the Line Block, Line Color tweak, which is where Squarespace’s line block guide puts it. Thickness is fixed on a Line block, so a heavier or thinner line means the code block method below. The catch with rotation is spacing: the block still occupies its original horizontal footprint, so the surrounding blocks do not know it is now tall. It is fine for a decorative line; it is fiddly next to text.

How do you make a vertical line between two columns?

This is the version people actually want, and neither block does it cleanly. The reliable way is a border on the column itself. In Fluid Engine, put your left-column content in a single block (a text block works), find its block ID, and add a right border:

#block-YOUR-ID {
  border-right: 1px solid #333333;
  padding-right: 30px;
}
@media screen and (max-width: 767px) {
  #block-YOUR-ID { border-right: none; padding-right: 0; }
}

The media query removes the line on phones, where the columns stack and a right border would sit under nothing. Change the colour and thickness in the first line; 2px and a lighter grey such as #cccccc is the usual choice for a divider.

How do you add a vertical line with a code block?

For a line with an exact height that stays centred in its own block, a code block is cleaner than a rotated Line block. Add a Code block, set it to HTML, and paste:

<div class="vline"></div>

Then in Custom CSS:

.vline {
  width: 1px;
  height: 120px;
  background: #333333;
  margin: 0 auto;
}

Change height for length and width for thickness. Because the class is site-wide, every code block with vline gets the same line, which is what you want for a repeating design element. Code blocks are available on every current plan, though on version 7.0 they are not available on the Personal plan.

Which method should you use?

Why does the vertical line disappear or look wrong?

• Gone on mobile: Fluid Engine mobile layouts are separate. Open the phone view and either place the shape again or set it to hide on mobile.
• Wrong colour: Line blocks take their colour from the section’s colour theme, not from the block. Edit the theme in Site Styles, Colors.
• Rotated line overlaps text: the block’s box did not rotate with it. Add top and bottom margin equal to half the width, or switch to the code block method.
• CSS does nothing: the block ID is wrong or the page has a different ID for the same-looking block; re-check with the ID finder, and make sure the CSS is in Custom CSS, not a page’s code injection.

Dividers are one of the details that separate a template from a finished site, along with the spacing, type and image rules in the Squarespace tips post. If you would rather not maintain CSS at all, it is the kind of thing I set up once on a Squarespace website design so the client never has to touch it, and the same block ID technique drives the button colour changes and anchor links on the same sites.

Frequently asked questions